react-study-one

react 学习第一天

待办事件. demo

组件1 待办事件处理模块

import React, { Component } from 'react';

import Todolist from './Todolist';

import FormContent from './FormContent';

export class Index extends Component {
  constructor(props) {
    super(props);
    this.refForm = React.createRef();
    this.state = {
      // 待办事件
      todolist: [],
    };
  }
  Sunbmit = e => {
    console.log(e, 'aaa');
    e.id = new Date().valueOf();
    this.setState({
      todolist: [...this.state.todolist, ...[e]],
    });
  };

  // 删除代办事件
  delTodo = val => {
    console.log(val, 'del');
    let toolistCopy = JSON.parse(JSON.stringify(this.state.todolist));
    let idx = toolistCopy.findIndex(item => item.id == val.id);
    if (idx != -1) {
      toolistCopy.splice(idx, 1);
      this.setState({
        todolist: toolistCopy,
      });
    }
  };
  render() {
    return (
      <div style={{ marginTop: '20px' }}>
        <FormContent onSunbmit={this.Sunbmit}></FormContent>
        <Todolist Todolistdata={this.state.todolist} delTodo={this.delTodo}></Todolist>
      </div>
    );
  }
}

export default Index;

待办事件展示模块

import React, { Component } from 'react';

import { Button, List } from 'antd';

export default class Todolist extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Todolistdata: [{ name: '111' }],
    };
  }

  componentDidMount() {
    this.setState({
      Todolistdata: this.props.Todolistdata,
    });
    console.log(this.props.Todolistdata);
  }

  del = val => {
    this.props.delTodo(val);
  };

  render() {
    const { Todolistdata } = this.props;
    console.log(this.props);
    return (
      <div>
        <List
          header={<div>头部</div>}
          footer={<div>删除</div>}
          bordered
          dataSource={Todolistdata}
          renderItem={item => (
            <List.Item>
              姓名：{item.name}，年纪:{item.num}
              <Button
                onClick={e => {
                  this.del(item);
                }}
                type="primary"
              >
                删除
              </Button>
            </List.Item>
          )}
        />
      </div>
    );
  }
}

待办事件新增模块 （antd 中的form。值得研究）。

import React, { Component } from 'react';
import { Form, Input, Button, Select, DatePicker, Switch, message, TimePicker } from 'antd';

import Todolist from './Todolist';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import moment from 'moment';
moment.locale('zh-cn');

export default class FormContent extends Component {
  constructor(props) {
    super(props);
    this.refForm = React.createRef();
    this.state = {
      formInit: {
        name: '', // 名称
        sex: 'woman',
        date: null, // 时间
        check: false,
        timerType: 'day', // 类型
        num: '1', //数量
        fixed: '', //固定日期
        start: '', // 开始位置
        end: '', // 结束位置
      },
    };
  }

  // 渲染时间框架
  renderTime = _ => {
    const { formInit } = this.state;
    let str = '';
    switch (formInit.timerType) {
      case 'day':
        str = <DatePicker.RangePicker locale={locale} style={{ width: '100%' }} format="YYYY-MM-DD" />;
        break;
      case 'hour':
        str = <TimePicker.RangePicker locale={locale} style={{ width: '100%' }} format="hh" />;
        break;
      case 'minuts':
        str = <TimePicker.RangePicker locale={locale} style={{ width: '100%' }} format="mm" />;
        break;
      default:
        break;
    }
    return str;
  };

  submit = _ => {
    console.log('提交');
    const data = this.refForm.current.getFieldValue();
    console.log(data);
    this.props.onSunbmit(data);

    // this.setState({
    //   todolist: [...this.state.todolist, { ...data, ...{ id: new Date().valueOf() } }],
    // });
    // this.state.todolist = [...this.state.todolist, { ...data, ...{ id: new Date().valueOf() } }];
    this.refForm.current.resetFields();
    // console.log(this.state.todolist, 'this.props.Todolistdata,');
  };
  // computer date   // 计算时间区间
  computerDate = _ => {
    let start = this.refForm.current.getFieldValue('start').toUpperCase();
    let end = this.refForm.current.getFieldValue('end').toUpperCase();
    let count = 0;
    if (start && end) {
      console.log({ start, end });
      let startNum = start.replace(/[^0-9]/gi, '');
      let endNum = end.replace(/[^0-9]/gi, '');
      // [a-z]
      let startStr = start.replace(/[^a-zA-Z]/gi, '');
      let endStr = end.replace(/[^a-zA-Z]/gi, '');
      if (startStr != endStr && startNum != endNum) {
        message.error('请输入正确区间');
      }
      // 同一列
      if (startStr == endStr) {
        count = Math.abs(startNum - endNum);
        console.log(count, '同一列');
      }
      // 同一行
      if (startNum == endNum) {
        count = Math.abs(startStr.charCodeAt() - endStr.charCodeAt());
        console.log(count, '同一行');
      }
      this.refForm.current.setFieldsValue({ num: count });
    }
  };

  render() {
    return (
      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} initialValues={this.state.formInit} layout="horizontal" ref={this.refForm}>
        <Form.Item label="测点名称" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="性别" name="sex">
          <Select
            onChange={e => {
              this.setState({
                formInit: { ...this.state.formInit, ...{ sex: e } },
              });
            }}
          >
            <Select.Option value="man">男</Select.Option>
            <Select.Option value="woman">女</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item label="应用区间">
          <Input.Group compact>
            <Form.Item name="start" noStyle>
              <Input style={{ width: '50%' }} onBlur={this.computerDate} />
            </Form.Item>
            <Form.Item name="end" noStyle>
              <Input style={{ width: '50%' }} onBlur={this.computerDate} />
            </Form.Item>
          </Input.Group>
        </Form.Item>
        <Form.Item label="时间类型">
          <Input.Group compact>
            <Form.Item name="timerType" noStyle>
              <Select
                style={{ width: '50%' }}
                onChange={e => {
                  this.setState({
                    formInit: { ...this.state.formInit, ...{ timerType: e } },
                  });
                }}
              >
                <Select.Option value="day">天</Select.Option>
                <Select.Option value="hour">小时</Select.Option>
                <Select.Option value="minuts">分钟</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item name="num" noStyle>
              <Input style={{ width: '50%' }} placeholder="Input street" />
            </Form.Item>
          </Input.Group>
        </Form.Item>
        <Form.Item label="时间" name="date">
          {/* {this.state.formInit.timerType == 'day' ? <DatePicker locale={locale} style={{ width: '100%' }} format={this.state.formInit.sex === 'man' ? 'YYYY-MM-DD' : 'YYYY-MM-DD'} /> : ''} */}

          {this.renderTime()}
        </Form.Item>

        <Form.Item label="切换" valuePropName="checked" name="check">
          <Switch
            onChange={e => {
              this.setState({
                formInit: { ...this.state.formInit, ...{ check: e } },
              });
            }}
          />
        </Form.Item>
        {this.state.formInit.check ? (
          <Form.Item label="固定日期" name="fixed">
            <DatePicker.RangePicker style={{ width: '100%' }} locale={locale} format="YYYY-MM-DD" />
          </Form.Item>
        ) : (
          ''
        )}

        <Form.Item label="Button">
          <Button onClick={this.submit}>提交</Button>
        </Form.Item>
      </Form>
    );
  }
}