Question

我正在使用react-select并创建了一个组件“ SelectControl”。现在，我在选项中使用了2个项目的数组。我试图在复选框中选中的数组中添加新项目（添加第3个项目），但在UI的下拉菜单中仅显示前2个项目。在我的组件中，“ componentWillRecieveProps”调用并获得3个项目，并且render方法在选项中返回3个项目。但是在UI上显示了2个项目，当我从这2个项目中选择任何项目时。然后出现第三项。

import React, { Component } from "react";
import Select from "react-select";

class SelectControl extends Component {
  // initial state
  constructor(props) {
    super();
    this.state = {
      "selectedOption": props.defaultVal,
      OtherInput: false,
      Options: props.options,
      OtherVal: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    var found = false;
    if (this.state.selectedOption) {
      if (this.props.multi == true) {
        this.state.selectedOption.find(function (element) {
          if (element.label == "Other") {
            found = true;
          }
        });
      } else {
        found = (this.state.selectedOption.label == "Other");
      }
      if (found == true) {
        this.setState({ OtherInput: true, OtherVal: this.props.otherOptionVal });
        this.props.handleChange("otherOption" + this.props.id, this.props.otherOptionVal);
      } else {
        this.setState({ OtherInput: false });
      }
      this.props.handleChange(this.props.id, this.state.selectedOption);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.from == "Settings") {
      this.setState({
        Options:
          nextProps.options, OtherVal: nextProps.otherOptionVal
      });
    }
  }

  handleChange = (selectedOption) => {
    this.setState({ "selectedOption": selectedOption });
    var found = false;
    if (selectedOption) {
      if (this.props.multi == true) {
        selectedOption.find(function (element) {
          if (element.label == "Other") {
            found = true;
          }
        });
      } else if (selectedOption) {
        found = (selectedOption.label == "Other");
      }
      if (found == true) {
        this.setState({ OtherInput: true });
      } else {
        this.setState({ OtherInput: false });
      }
    }

    if (this.props.handleChange) {
      this.props.handleChange(this.props.id, selectedOption);
    }
  };

  handleOtherInput = (e) => {
    this.setState({ OtherVal: e.target.value });
    this.props.handleChange("otherOption" + this.props.id, e.target.value);
  }

  render() {
    const Options = this.state.Options;
    return (
      <div className="field-input-time">
        {this.props.title && <label>{this.props.title}</label>}
        <Select
          placeholder={this.props.placeholder && (this.props.placeholder)}
          id={this.props.id}
          name={this.props.name}
          value={this.state.selectedOption}
          onChange={this.handleChange}
          isMulti={this.props.multi ? this.props.multi : false}
          options={this.state.Options}
        />
        <span id={"error" + this.props.id} className="err-msg">This question is required</span>
        {this.state.OtherInput && <div><input type="text" value={this.state.OtherVal} placeholder="Specify Other.." id={"otherOption" + this.props.id} onChange={e => this.handleOtherInput(e)} />
          <span id={"errorotherOption" + this.props.id} className="err-msg">
            Please Specify Other
  </span></div>}
      </div>
    );
  }
}

export default SelectControl;

Answer 1

首先，我想指出的是，使用componentWillReceiveProps复制来自另一状态的数据可能会导致真相重复来源。 Facebook itself advise to use it sparingly

在这种情况下，为什么不直接使用来自道具的选项？

<Select
  placeholder={this.props.placeholder && (this.props.placeholder)}
  id={this.props.id}
  name={this.props.name}
  value={this.state.selectedOption}
  onChange={this.handleChange}
  isMulti={this.props.multi ? this.props.multi : false}
  options={this.props.options}
/>

下拉菜单未更新为新项目

1 个答案: