React中Form表單資料獲取
阿新 • • 發佈:2018-11-10
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>); }, },