1、getFieldDecorator
使用getFieldDecorator之前,必须先使用 Form.create({ })(Form) 将表单组件包裹起来。
class List extends React.Component {
}
// 导出时将组件 List 用 Form.create()包裹起来
export default Form.create()(List)
经过 Form.create 包装的组件将会自带 this.props.form 属性,通过解构赋值将 form 解构出来;在List组件的 render 函数里面:
const {
form } = this.props;
const {
getFieldDecorator } = form;
这个方法用于和表单进行双向绑定,它接收两个参数,第一个是表单的字段对象,第二个是校验规则。方法本身返回一个方法,将获取值的标签包裹住。
<Form>
<FormItem {
...formItemLayout} label='角色' key='role'>
{
getFieldDecorator('role', {
initialValue:'role',
rules:[]
})(
<Input autoComplete="off" placeholder='请输入角色'/>
)
}
</FormItem>
<FormItem {
...formItemLayout} label='角色' key='name'>
{
getFieldDecorator('list.name', {
initialValue:'list.name',
rules:[]
})(
<Input autoComplete="off" placeholder='请输入角色'/>
)
}
</FormItem>
</Form>
initialValue:子节点的初始值
rules:校验规则
2、getFieldValue
获取 form 表单里面的值
submit = (e) =>{
e.preventDefault();
const {
form } = this.props;
let data = form.getFieldValue(); // 获取所有form 数据
let role= form.getFieldValue('role'); // 获取所有role数据
let role= form.getFieldValue('list.name'); // 获取所有name数据
}
getFieldValue 不能获取没有用 getFieldDecorator 绑定的值。
3、setFieldValue
设置 form 表单里面的值。
changeValue = () =>{
const {
form } = this.props;
form.setFieldsValue({
'role':'21'}); //修改role值
form.setFieldsValue({
'list.name':'21'}); //修改name值
}
setFieldValue 不能设置没有用 getFieldDecorator 绑定的值。
4、resetFields
清空 form 表单
handleEmpty = () => {
const {
form } = this.props;
form.resetFields();
}