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>
  );
  
});