antd的select的二次封装后表单进行双向绑定

今天在测试的时候遇到了问题，就是重置表单的时候自定义组件的值没有改变。

修改前的子组件代码的

import { Select } from 'antd';

import React, { Component } from 'react';

class SelectDom extends Component {

  state = {

    value: undefined,

  };

  handleChange = value => {

    this.setState({ value });

    this.props.onChange(value);

  };

  render() {

    const { Option } = Select;

    const {

      data,

      label = 'name',

      keyValue = 'id',

      showSearch = false,

      showArrow = true,

      placeholder = '不限',

    } = this.props;

    const options = data.map(item => (

     

        {item[label]}

     

    ));

    return (

     

        style={{ width: '200px' }}

        allowClear

        optionFilterProp="label"

        showSearch={showSearch}

        showArrow={showArrow}

        placeholder={placeholder}

        value={this.state.value}

        onChange={this.handleChange}

      >

        {options}

     

    );

  }

}

export default SelectDom;

修改前子组件的value是在自己组件内进行更新的，然后在触发父组件的change方法，这样可以在表单获取值的时候拿到子组件的value 但是再重置表单的时候无法更新子组件的状态。

修改后的子组件代码

import { Select } from 'antd';

import React from 'react';

import { connect } from 'dva';

const SelectDom = props => {

  const { Option } = Select;

  const {

    data,

    label = 'name',

    keyValue = 'id',

    showSearch = false,

    showArrow = true,

    placeholder = '不限',

  } = props;

  const options = data.map(item => (

   

      {item[label]}

   

  ));

  return (

   

      style={{ width: '200px' }}

      allowClear

      optionFilterProp="label"

      showSearch={showSearch}

      showArrow={showArrow}

      placeholder={placeholder}

      value={props.value}

      onChange={v => props.onChange(v)}

    >

      {options}

   

  );

};

export default connect(

  null,

  null,

  null,

  { forwardRef: true },

)(SelectDom);

父组件引用

import { SelectDom } from '../packetCenter/compontents';

   {getFieldDecorator('fundId')(

       ,

   )}

使用getFieldDecorator后会自动为组件添加change方法和value属性，从而达到双向绑定。利用这个原理就把子组件的值直接与父组件进行绑定。这样在重置表单的时候就可以更新子组件的状态。

由于修改后的组件属于无状态组件，直接使用了函数组件去封装。这样在react16.x版本控制台会提示一个警告如图所示：

如图

就使用了connect方法，connect第四个参数可以设置在父组件中使用ref