react之表单操作

Form.create(options),经 Form.create() 包装过的组件会自带 this.props.form 属性; 这里的options有onFieldsChange,onValuesChange等,例:

image

<figcaption style="box-sizing: border-box; display: block; text-align: center; font-size: 0.8em; line-height: 2em; color: rgb(144, 144, 144);"></figcaption>

form表单里面的某一个元素发生变化的时候触发onValuesChange,在这个方法里面,可以通过dispatch记录每次修改的值,保存到props中,最后向后台请求的时候一并传到后台;

对于一个页面有多个form表单的时候,每个form表单都是一个独立的个体,例: (变量名首字母都得大写)

const AmontModal = Form.create()(props=>{ const { 所需要的变量/方法 linkage } = props; const modalOk = ()=>{ linkage() } }) 在父组件的render中定义一个parentMethods:

image

<figcaption style="box-sizing: border-box; display: block; text-align: center; font-size: 0.8em; line-height: 2em; color: rgb(144, 144, 144);"></figcaption>

在render的return的里面添加一行
image

<figcaption style="box-sizing: border-box; display: block; text-align: center; font-size: 0.8em; line-height: 2em; color: rgb(144, 144, 144);"></figcaption>

这个标签里面用的ref主要是为了在父组件方法中对AmontModal中的form表单等一些变量和方法的操作 使用时:this.refs.clearRedeem.resetFields,如果不清楚里面有什么,可以先console.log(this.refs.clearRedeem)打印出来看一下。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容