React + antd3.XフォームフォームgetFieldDecorator、getFieldValue、setFieldValue、resetFieldsメソッドの使用法

1、getFieldDecorator

getFieldDecoratorを使用する前に、まずForm.create（{}）（Form）を使用してフォームコンポーネントをラップする必要があります。

class List extends React.Component {
    
    }

// 导出时将组件 List 用 Form.create()包裹起来
export default Form.create()(List)

Form.createによってパッケージ化されたコンポーネントには、独自のthis.props.formプロパティがあり、フォームは、リストコンポーネントのレンダリング関数で、非構造化割り当てによって分解されます。

const {
    
     form } = this.props;
const {
    
     getFieldDecorator } = form;

このメソッドは、フォームとの双方向バインディングに使用されます。2つのパラメーターを受け取ります。1つはフォームのフィールドオブジェクトで、もう1つは検証ルールです。メソッド自体は、値を取得するタグをラップするメソッドを返します。

<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：子ノードの初期値
ルール：検証ルール

2、getFieldValue

フォームで値を取得します

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

フォームに値を設定します。

changeValue = () =>{
    
    
	const {
    
     form } = this.props;
	form.setFieldsValue({
    
    'role':'21'}); //修改role值
	form.setFieldsValue({
    
    'list.name':'21'}); //修改name值
}

setFieldValueは、getFieldDecoratorにバインドされていない値を設定することはできません。

4、resetFields

明確な形

handleEmpty = () => {
    
    
	const {
    
     form } = this.props;
	form.resetFields();
}