antD表单

最新推荐文章于 2024-08-20 20:34:29 发布

lululululululu22

最新推荐文章于 2024-08-20 20:34:29 发布

阅读量989

点赞数

分类专栏： js react antd react双向数据绑定 AntD的Input

本文链接：https://blog.csdn.net/lunmeifan/article/details/88948096

版权

js 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

react

2 篇文章 0 订阅

订阅专栏

antd

2 篇文章 0 订阅

订阅专栏

    this.props.form.resetFields();

使用 Form.create 处理后的表单具有自动收集数据并校验的功能

    XXX = createForm()(XXX);

使用 AntD 、React 双向数据绑定

   getInitialState() {
        return {
            formData:{
                extraName:'',
            }
        }
    },
    detectNameLength(rule, value, callback) {
        const name = this.props.form.getFieldsValue().extraName;
        this.setState({
            formData:{
                extraName:name
            }
        })
    }

    render() {
   		const {getFieldProps} = this.props.form;
        const {isValidated, formData} = this.state;

        const extraNameProps = getFieldProps('extraName', {
            initialValue: formData.extraName,
            rules: [
                {required: true, message: '必填'},
                {validator: this.detectNameLength},
            ],
        });
 return( 
   <div>
	  <Form inline  form={this.props.form}>
	    <FormItem labelCol={{span: 3}}  wrapperCol={{span:16}}   label="姓名" required>
           <Input
                    {...extraNameProps}
                     maxLength='19'
                      name="extraName"
                     placeholder="请输入姓名" />
 	  </FormItem>
	</Form>
    <div> {this.state.formData.extraName} </div>
  </div>)
}