react antd

潑皮,休要囂張~發表於2018-04-20

react 的 antd框架中 form使用需注意:

1、不能用state改變下拉框、輸入框等元件的值,因為 經過 getFieldDecorator 包裝的控制元件,表單控制元件會自動新增 value(或 valuePropName 指定的其他屬性) onChange(或 trigger 指定的其他屬性),資料同步將被 Form 接管值。要用setFieldsValue({key:value});

2、比如修改頁面使用form 用到下拉框Select時,要給select加上lableInValue={true}屬性,相應的setFieldsValue 的value也必須換成{key:“”,value:””}的形式

3、子元件form表單自定義的方法,父元件裡通過this.refs.someName.somoeFunction是獲取不到該方法的,要用wrappedComponentRef:

<From wrappedComponentRef={(inst) => this.formRef = inst}/>

this.formRef.somoeFunction

因為原始碼中

class Form extends React.Component { ... }

// deprecated
const EnhancedForm = createForm({ withRef: true })(Form);
<EnhancedForm ref="form" />
this.refs.form.refs.wrappedComponent // => The instance of Form

// Recommended
const EnhancedForm = createForm()(Form);
<EnhancedForm wrappedComponentRef={(inst) => this.formRef = inst} />
this.formRef // => The instance of Form

 4.mobx 和from一起使用,如果是用修飾器寫法,要這樣寫:

@Form.create()
@observer

先建立form再去監聽。

相關文章