在react中对自己的组件使用setFieldsValue

setFieldsValue的用法
setFieldsValue是antd form的一个api，其作用是对指定的已使用from包裹的表单进行value设置。那么所以它的功能也很简单，那就是给指定的input设置value。
如下所示：

 

import React from "react";
import { Form, Input } from 'antd';

class TestForm extends React.Component {
  componentDidMount(){
    const { setFieldsValue } = this.props.form;
    // 这里就能实现指定表单设置value
    setTimeout(()=>{
        setFieldsValue({"username": "Tom"})
    },5000)
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form >
        <Form.Item>
          {getFieldDecorator('username', {})(<Input />)}
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create()(TestForm)

问题
那么假如把

{getFieldDecorator('username', {})(<Input />)}
1
换成

{getFieldDecorator('username', {})(<TestInput />)}
1
setFieldsValue 设置的value去哪了？相信聪明的你一眼就看透了，自然是在TestInput上面。假如TestInput是我们自定义的组件，那么我们则可以在props中找value这个属性，那么假如我们的Input是自定义的input组件，我们可以这么写

import React from "react";
import { Input } from 'antd';

class TestInput extends React.Component {

    state = {
        value: ""
    }
    
    componentWillReceiveProps(nextProps){
        if(nextProps.value){
            this.setState({
                value: nextProps.value
            })
        }
    }
    
    render() {
        return (
          <div >
              <Input value={this.state.value}/>
          </div>
        );
      }
}

export default TestInput

这样，我们就能使用setFieldsValue设置自定义的组件了