添加用户

新建表单组件：

const CreateForm = props => {
  const { modalVisible, form, handleAdd, handleModalVisible } = props;

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };
    function onChange(value) {
    console.log(`selected ${value}`);
  };
    function onFocus() {
    console.log('focus');
  };
    function onBlur() {
    console.log('blur');
  };
    function onSearch(val) {
    console.log('search:', val);
  };
  return (
    <Modal
      destroyOnClose
      title={createUser}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <FormItem
        labelCol={{
          span: 5,
        }}
        wrapperCol={{
          span: 15,
        }}
        label={code}
      >
        {form.getFieldDecorator('code', {
          initialValue: [1],
        })(<Input placeholder="请输入" />)}
      </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={sex}>
        <Select
          showSearch
          style={{ width: 200 }}
          placeholder="选择性别"
          optionFilterProp="children"
          onChange={onChange}
          onFocus={onFocus}
          onBlur={onBlur}
          onSearch={onSearch}
          filterOption={(input, option) =>
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        >
          <Option value="">无</Option>
          <Option value="male">男</Option>
          <Option value="female">女</Option>
        </Select>
      </FormItem>
      
    </Modal>
  );

};

export default Form.create()(CreateForm);

提交表单okHandle函数，通过form.validateFields将数据传给父组件

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };

在父组件定义handleAdd函数

state = {
    modalVisible = false;
}
  handleAdd = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'listTableList/add',
      payload: {
        code: fields.code,
        username: fields.username,
        name: fields.name,
        email: fields.email,
        mobile: fields.mobile,
        password: fields.password,
        sex: fields.sex,
        age: fields.age,
        status: fields.status,
        type: fields.type,
        position: fields.position,

      },
    });
    message.success('添加成功');
    this.handleModalVisible();
  };
  
  const parentMethods = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible,
  };
  
  //引入添加用户组件
  <CreateForm {...parentMethods} modalVisible={modalVisible} />