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);

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