antd form表单自定义组件取值，rc-form

在 react 中由于没有数据双向绑定，在使用表单的时候，就需要自己一个一个的绑定，获取值的时候，也去要一个一个的去状态里面拿值，想在点击提交按钮把表单中的所以=有数据获取到，

一般都是使用 antd 中的 Form 组件，这样确实很方便，但是如果是自定义组件的时候就会有问题，出现取不到值，或者，编辑表单的时候值不能回显，需要手动单个处理，还是很不方便的，

下面记录的就是处理自定义组件的方式。

父组件：

class Parent extends React.Component{
    constructor(props){
        super(props);
    }// 提交表单
    handleSubmit = () => {
        this.props.form.validateFields((err: any, values: any) => {
            if (err){
                return;
            }
            console.log(values);
        })
    }
    render() {const { getFieldDecorator, getFieldProps, setFieldsValue  }  = this.props.form;
        return (
            <div>
                <Form>       
                     <Form.Item {...formLayout1}>
　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　getFieldDecorator('name')(
　　　　　　　　　　　　　　　　　　<Child />
　　　　　　　　　　　　　　　　)　　　    　　　　
　　　　　　　　　　　　　　}
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

子组件：

class Child extends React.Component{
    constructor(props){
        super(props)
        this.state = {
        }
    }
    render() {
      const { onChange, value } = this.props;// 有默认传来的 chang事件，和 value值
      const { getFieldProps, name } = this.props;return (
          <div>
              <Input onChange={(e)=>onChange(e.target.value)} value={value}/>
         </div>
      );
    }
}

以上操作就可以在表单中使用自定义组件，表单也能统一获取值, 并且 即便不是 input 输入框，也可以是一些别的什么弹出选择组件，只要你拿到值后，把值给 onChange 方法，都是可以统一获取值的，然后会在 props 上得到一个 value ，用来显示，以及 form 通过 setFiledsvalue 的方式设置表单值，也是可以得到值进行显示，在编辑回显数据很有用的

rc-form

　　在我们用不了 antd 中的 Form 组件或者不需要用的时候，但是还是想用表单一键取值的时候，可以用这个库。antd 中Form 组件也是使用这个库的

　　使用方式如下

import React, { Component } from 'react';
import { Button, Input } from 'antd';
import { createForm, formShape } from 'rc-form';
class Login extends Component{
  
  constructor(props) {
    super(props);
    this.state = {
        loading: false,
        user: '',
        pwd: ''
    };
  }
  static propTypes = {
　　　　form: formShape,
　};
  componentDidMount() {
      this.props.form.setFieldsValue({
          name: '124'
      })
  }
  submit = () => {
    this.props.form.validateFields((error: any, values: any)=>{
        console.log(values);
    })
  }
  render() {
    const { loading } = this.state;
    const form:any = this.props.form;
    const {getFieldDecorator, getFieldError } = form;return (
        <div>
　　　　　　　　<div>
　　　　　　　　　　{
　　　　　　　　　　　　getFieldDecorator('name',{
　　　　　　　　　　　　　　rules: [{
　　　　　　　　　　　　　　　　　　　　required: true,
　　　　　　　　　　　　　　　　　　　　message: '名字不能为空'
　　　　　　　　　　　　　　　　　　}],
　　　　　　　　　　　　})(<AJTextField/>)
　　　　　　　　　　}
　　　　　　　　　　{
　　　　　　　　　　　　// 错误信息获取
　　　　　　　　　　　　getFieldError('name')
　　　　　　　　　　}
　　　　　　　　</div>
　　　　　　　　<div>
　　　　　　　　　　{
 　　　　　　　　　　　　getFieldDecorator('pwd',{
　　　　　　　　　　　　　　rules: [{
　　　　　　　　　　　　　　　　　　required: true,
 　　　　　　　　　　　　　　　　　 message: '密码不能为空'
　　　　　　　　　　　　　　　　}]
　　　　　　　　　　　　　　})(<Input type="password"  placeholder="请输入密码"/>)
　　　　　　　　　　}
　　　　　　　　</div>
　　　　　　　　<div>
　　　　　　　　　　<Button onClick={this.submit}>登 录</Button>
　　　　　　　　</div>     
        </div>
    );
  }
}
export default createForm()(Login);

自定义组件的方式仍然是一样的

posted on 2019-05-28 17:17 浅唱年华1920 阅读(11916) 评论(0) 编辑收藏举报

antd form表单 自定义组件 取值，rc-form

antd form表单自定义组件取值，rc-form