反应选择没有选择选项答案

【问题标题】：React select is not selecting option反应选择没有选择选项
【发布时间】：2019-02-18 22:27:13
【问题描述】：

我附上了代码沙箱，它是我实际应用程序的简化版本。我尝试单击选项，但在 React Select v1 选项中没有选择它们。

这是我的容器文件。如果我删除return( <div> <SelectComponent/> 中的val，这是选择组件的值，它将显示我选择的任何内容，但我需要值道具。我需要 value 道具，以便我可以将 value 提交到我的服务器。

此外，如果我将await this.setState({ val: event.value }) 替换为await this.setState({ val: event.val })，组件将显示所选选项，但val 将未定义。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      val: null
    };
  }

  handleChange = async event => {
    event !== null
      ? await this.setState({ val: event.value })
      : await this.setState({ val: null });
  };
  render() {
    let fruitArray = [
      { value: "apple", label: "Apple" },
      { value: "orange", label: "Orange" },
      { value: "watermelon", label: "Watermelon" }
    ];
    return (
      <div>
        <SelectComponent
          val={this.state.val}      
          select_id="fruit_select_id"
          select_options={fruitArray}
          select_placeholder="Choose a fruit"
          handle_change={this.handleChange}
        />
      </div>
    );
  }
}

这是我选择的组件文件。我也尝试过使用无状态版本，但结果相同，没有选择任何内容。

class SelectComponent extends Component {
  render() {
    const {
      select_id,
      select_options,
      handle_change,
      select_placeholder,
      val
    } = this.props;
    return (
      <div>
        <Select
          value={val}
          id={select_id}
          name={select_id}
          options={select_options}
          onChange={handle_change}
          placeholder={select_placeholder}
          isClearable
        />
      </div>
    );
  }
}

谁能告诉我出了什么问题？

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

Select 组件希望整个选定的选项对象作为value 属性。如果您将整个对象置于 state 而不仅仅是 value 属性，它将起作用。

handleChange = option => {
  this.setState({ val: option });
};

【讨论】：

【解决方案2】：

1 - 没有任何 async/await 的理由。这只会让 React 搞砸。

handleChange = event => this.setState({ val: event.value });

2 - 您将val 传递给您的SelectComponent，但您需要传递value；

<SelectComponent
      value={this.state.val}      
      select_id="fruit_select_id"
      select_options={fruitArray}
      select_placeholder="Choose a fruit"
      handle_change={this.handleChange}
/>

【讨论】：

确实我不需要它们，我从我的代码中删除了 async/await。您的代码也适用于显示所选选项，但是当我尝试重置该选项时它不起作用（帖子中没有询问）。 @Tholle 的回答对我有用，我感谢你的努力。