react antd

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再去监听。

posted @ 2018-04-20 15:00  前端菜园子  阅读(936)  评论(0编辑  收藏  举报