1、getFieldDecorator
Before using getFieldDecorator, you must first use Form.create({ })(Form) to wrap the form components.
class List extends React.Component {
}
// 导出时将组件 List 用 Form.create()包裹起来
export default Form.create()(List)
The component packaged by Form.create will have its own this.props.form property, and the form will be deconstructed through destructuring assignment; in the render function of the List component:
const {
form } = this.props;
const {
getFieldDecorator } = form;
This method is used for two-way binding with the form. It receives two parameters, the first is the field object of the form, and the second is the validation rule. The method itself returns a method that wraps the tag that gets the value.
<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: the initial value of the child node
rules: verification rules
2、getFieldValue
Get the value in the 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 cannot get the value that is not bound with getFieldDecorator.
3、setFieldValue
Set the value in the form.
changeValue = () =>{
const {
form } = this.props;
form.setFieldsValue({
'role':'21'}); //修改role值
form.setFieldsValue({
'list.name':'21'}); //修改name值
}
setFieldValue cannot set a value that is not bound with getFieldDecorator.
4、resetFields
Clear form
handleEmpty = () => {
const {
form } = this.props;
form.resetFields();
}