react中使用AntD表单

àì夳堔傛蜴生んèń 2022-01-25 18:13 439阅读 0赞

# react中使用AntD表单 #

### 1.双向数据绑定 ###

render() { 
        const {  getFieldDecorator } = this.props.form;//双向数据绑定
        return (
          <div>
            <Form >
              <FormItem label="姓名">
                { getFieldDecorator('userName')(
                  <Input></Input>
                )}
              </FormItem>
            </Form>
          </div>
        );
     }

##### 注意点 #####

*  直接使用会报错，需要使用Form.create(options)才能接受数据  
    在js文件最后添加以下代码即可

form = Form.create({ })(form);
    export default form

*  设置初始值的时候

不能在表单里直接使用`value=`，这样会报错：

Warning: `getFieldDecorator` will override `value`, so please don’t set `value` directly and use `setFieldsValue` to set it.

> 需要在getFieldDecorator中需要用initalValue来设置值

<Form.Item key={ i} >
                { getFieldDecorator(field,{ 
                  initialValue:item.initLabel,//设置的默认值
                })(
                  <Select
                    style={ {  width: '120' }}
                    onChange={ this.handleCurrencyChange}
                  >
                    { BaseUI.getOptionList(item.Options)}
                  </Select>
                )}
    </Form.Item>

### 2.获取表单数据 ###

这里以form抽离为单独的组件userForm为例  
我们在其他页面引入userForm组件

<UserForm wrappedComponentRef={ (form) => this.userForm = form}>
     </UserForm>

`wrappedComponentRef`相当于vue中的ref，这样`this.userform`就是这个dom节点

*  获取数据  
    `this.userForm.props.form.getFieldsValue()`
 *  重置数据  
    `this.userForm.props.resetFields()`

更多请参考antd文档

### 3.表单验证 ###

基础用法

<Form.Item key="author">
    { getFieldDecorator("author", {  rules: [{  required: true, message: '请输入作者!' }] })
    (<Input placeholder="作者" allowClear />)}
    </Form.Item>

自定义验证

checkPhone = (rule, value, callback) => { 
        let reg = /^1(3|4|5|7|8)\d{9}$/;
        if (!value) { 
          callback("请输入手机号")
        }
        else if (!reg.test(value)) {  callback("请输入正确的手机号格式") }
        else { 
          callback()
        }
    }
    ...
    <Form.Item key="phone">
    { getFieldDecorator("phone", {  rules: [{  validator: this.checkPhone }], })
    (<Input placeholder="手机号" allowClear />)}
    </Form.Item>