1. 程式人生 > >React中Form表單資料獲取

React中Form表單資料獲取

const { getFieldDecorator } = this.props.form;

this.getFieldsValue = this.props.form.getFieldsValue;//獲得表單所有控制元件的值

this.props.form.getFieldsValue(“name”)//獲得指定控制元件的值

在ant design 2x 中

{getFieldDecorator('note', { rules: [{ required: true, message: 'Please input your note!' }], })( <Input />)

getFieldDecorator 用於和表單進行雙向繫結,其中

經過 getFieldDecorator 包裝的控制元件,表單控制元件會自動新增 value,資料同步將被 Form 接管

 {
        title: '付款金額',
        dataIndex: 'needPayPrice',
        key: 'needPayPrice',
        width: 120,
        render: (text, record, index) => {
          return (<FormItem style={{ marginBottom: 0 }}>{this.getFieldDecorator(`needPayPrice_${index}`, {
            initialValue: record.no_pay_amount,
            rules: [
              {
                message: '請填寫正確的付款金額',
                pattern: /(^[0-9]{1,9}$)|(^[0-9]{1,9}[.]{1}[0-9]{1,2}$)/,
                required: true,
              },
              {
                validator: (rule, value, callback) => {
                  if (Number(value) <= 0) {
                    callback('請填寫正確的付款金額');
                  }
                  callback();
                },
              },
            ],
            validateFirst: true,
          })(<Input placeholder="付款金額" style={{ width: 80 }} />)}
          </FormItem>);
        },
      },