自定义下拉字段组件与Redux-Form不兼容

Question

我有以下问题。 我使用元素自定义了自己的DropDown组件。 我希望该元素与Redux-Form交互，因为我要保存所选的值。 这不起作用：

<Field
name="name"
component={MyCustomizedDropDown}
data={myData}/>

另一种选择是使用“输入”道具，但是由于我正在使用元素，因此这是不可能的。 有人可以给我解决方案吗？ 谢谢。

MyCustomizedDropDown组件：

import React, { Component } from "react";
import PropTypes from "prop-types";

class MyCustomizedDropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ...this.props,
      items: this.props.items || [],
      selectedItem: this.props.items[0] || this.props.selectedItem,
      showItems: false,
      isOpened: false
    };
    this.dropDown = this.dropDown.bind(this);
    this.selectedItem = this.selectedItem.bind(this);
  }

  dropDown() {
    this.setState(prevState => ({
      showItems: !prevState.showItems
    }));
  }

  selectedItem(item) {
    this.setState({
      selectedItem: item,
      showItems: false
    });
  }

  render() {
    const { input } = this.props;
    return (
      <div className="select-box--wrapper">
        <div className="select-box--toggle" onClick={this.dropDown}>
          <div className="select-box--selected-item">
            {this.state.selectedItem && this.state.selectedItem.value}
          </div>
          <MyImage
            className={`${
              this.state.showItems
                ? "select-box--arrow-rotated"
                : "select-box--arrow"
            }`}
          />
        </div>
        <div className="select-box--main">
          <div
            {...input} \\THIS DOES NOT WORK
            className="select-box--items">
            {this.state.data.map(item => (
              <div key={item.id} onClick={() => this.selectedItem(item)}>
                {item.value}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}


MyCustomizedDropdown.propTypes = {
  data: PropTypes.array,
  selectedItem: PropTypes.array,
  input: PropTypes.object
};

export default MyCustomizedDropdown;

Answer 1

您不应该在输入状态下处理输入的值。 MyCustomizedDropDown应该接收handleChange函数， items和selectedItem作为道具。 组件状态下唯一的事情就是它是否打开。

Answer 2

redux-form仅适用于“受控”组件。 这意味着组件需要一个道具，父母可以使用它来告知其价值。 例如，以下是受控组件：

<TextField 
  value={this.state.inputValue} 
  onChange={(value) => this.setState({ inputValue: value })} 
/>

请注意，我们要告诉TextField组件其值是什么。 您需要更改组件以相同的方式工作。 唯一需要注意的是，redux-form会注入一个称为input的prop，它是一个包含value和onChange （以及其他一些东西）的对象，而不是直接注入value和onChange 。

因此，对于上面的示例，它需要像这样工作以支持redux-form ：

<TextField 
  input={{
    value: this.state.inputValue,
    onChange: (value) => this.setState({ inputValue: value })
  }}
/>

这是将您的组件编写为“受控”组件的方式，该方式应与redux-form一起使用：

import React, { Component } from "react";
import PropTypes from "prop-types";

class MyCustomizedDropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showItems: false
    };
    this.dropDown = this.dropDown.bind(this);
    this.selectedItem = this.selectedItem.bind(this);
  }

  dropDown() {
    this.setState(prevState => ({
      showItems: !prevState.showItems
    }));
  }

  hideDropdownItems() {
    this.setState({
      showItems: false
    });
  }

  render() {
    const { input } = this.props;
    return (
      <div className="select-box--wrapper">
        <div className="select-box--toggle" onClick={this.dropDown}>
          <div className="select-box--selected-item">
            {this.input.value && this.input.value.value}
          </div>
          <MyImage
            className={`${
              this.state.showItems
                ? "select-box--arrow-rotated"
                : "select-box--arrow"
            }`}
          />
        </div>
        <div className="select-box--main">
          <div
            className="select-box--items">
            {this.state.data.map(item => (
              <div 
                key={item.id} 
                onClick={() => {
                  this.input.onChange(item)
                  this.hideDropdownItems();
                }}
              >
                {item.value}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}


MyCustomizedDropdown.propTypes = {
  data: PropTypes.array,
  selectedItem: PropTypes.array,
  input: PropTypes.object
};

export default MyCustomizedDropdown;

• 请注意，我们使用this.props.input.value告诉MyCustomizedDropdown它的值是this.props.input.value
• 如果组件想要更改其值，我们将其称为this.props.input.onChange 。 由于它不能独自完成它，因此需要告诉它要更改其值的父项。
• 父级需要响应onChange并更新MyCustomizedDropdown的值

例如，这是不带redux-form组件的使用redux-form ：

<MyCustomizedDropdown 
  input={{
    value: this.state.dropDownValue,
    onChange: (value) => this.setState({ dropDownValue: value })
  }}
/>

使用redux-form，您可以简单地执行以下操作，因为redux-form可为您管理所有这些工作：

<Field
  component={MyCustomizedDropdown}
/>