在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 />)}

换成

{getFieldDecorator('username', {})(<TestInput />)}

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设置自定义的组件了