Question

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

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

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

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

您不应该在输入状态下处理输入的值。 -runMode=console -projectPath=”$(Build.SourcesDirectory)\Sample Web Testing Project.prj” -reportFolder=”Reports” -reportFileName=”report” -retry=0 -testSuitePath=”Test Suites/TS_RegressionTest” -browserType=”Chrome” -noSplash应该接受MyCustomizedDropDown函数，handleChange和items作为道具。唯一应该处于组件状态的东西是打开还是未打开。

Answer 2

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

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

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

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

redux-form

在这里，您的组件被编写为“受控”组件，其方式应与redux-form一起使用：

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

请注意，我们告诉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;使用MyCustomizedDropdown的价值是什么
如果组件要更改其值，我们称this.props.input.value。由于它本身无法执行操作，因此需要告诉它要更改其值的父项。
父母需要回应this.props.input.onChange并更新onChange的值

例如，这是在没有MyCustomizedDropdown的情况下使用组件的方式：

redux-form

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

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

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

2 个答案: