React 关于Ant Design中Form表单组件化使用的相应记录

基础的就是Ant Design的Form组件

传送门：https://ant.design/components/form-cn/

在最初的项目中，由于我要用到Form，所以不得不把每个带表单的页面（不管表单复杂与否）单独放在一个JS文件中，然后就不得不涉及父子组件通信方面的问题。

基本结构是这样的

class AddForm extends PureComponent{
    constructor(props){
        super(props);
        ......
    }

    ...

    render(){
    const { getFieldDecorator } = this.props.form;
      return(
          <Form>
            ...
          </Form>
      )  
    } 
}

const Add = Form.create()(AddForm);
export default Add;

表单提交时验证&取值 (validateFields)

let form = this.props.form;
form.validateFields((err, values) => {
    if (!err) {
        let obj = {
            Name: values.Name,
            ...
        }
    }
}

表单赋值 (setFieldsValue)

let data = {
    Name: 'xx',
    Age: 33,
}

const { from } = this.props;
form.setFieldsValue({
    Name: data.Name,
    Age: data.Age,
})

而后，我看了Ant Design Pro中的示例代码，发现可以在页头加入声明

@Form.create()

即可取代冗余的申明。当然文章到这里并没有结束，如何将表单写成一个无状态组件，即

const myForm = Form.create()(props => {
    const { form } = props;
    
    return(
        <FormItem label='姓名'>
            {form.getFieldDecorator('Name',{
                rules: [{ required: true, message: 'x姓名不能为空！' }],
            })(<Input />)}
        </FormItem>
        ...
    )    
}

//render调用
<myForm />

随后衍生出来的问题就是，当我要在Modal中放入一个编辑表，必须要有初始化值

于是我查阅了API，Form.create(options)，在create中提供多个参数

一看之后，通过 mapPropsToFields 就是可以实现表单数据的映射，下面的完整的代码

const EditForm = Form.create({
  mapPropsToFields(props){
    if(props.data.Data!=undefined){
      const rxd = props.data.Data.RXD;
      return {
        RoadName:Form.createFormField({ value: rxd.RoadName }),
        Position:Form.createFormField({ value: rxd.Position }),
      }
    }
    
  }
})(props => {
  const { form, modalVisible, handleModalVisible, handleAdd,data } = props;
  const formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 15 },
  };

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      //handleAdd(fieldsValue);
    });
  };
 
  return (
    <Modal
      destroyOnClose
      title="编辑详情"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <FormItem {...formItemLayout} label="道路名称">
        {form.getFieldDecorator('RoadName', {
          rules: [{ required: true, message: '道路名称不能为空！' }],
        })(<Input placeholder="请输入" />)}
      </FormItem>
      <FormItem {...formItemLayout} label="详细位置">
        {form.getFieldDecorator('Position')(<Input placeholder="请输入" />)}
      </FormItem>
      <FormItem {...formItemLayout} label="长（m）">
        {form.getFieldDecorator('Long', {
          rules: [
            { validator: decimalValidator, message: '小数点最多保留两位！' },
            { required: false },
          ],
        })(<InputNumber style={{ width: '100%' }} step={0.01} placeholder="请输入" />)}
      </FormItem>
      <FormItem {...formItemLayout} label="完成日期">
        {form.getFieldDecorator('CompleteDate', {
          rule: [{ required: true }],
        })(<DatePicker style={{ width: '100%' }} />)}
      </FormItem>
    </Modal>
  );
  
});