React select 不是 selecting 选项

Question

我附上了代码沙箱，它是我实际应用程序的简化版本。我尝试点击选项，但其中 none 正在 React Select v1 选项中被 select 编辑。

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

此外，如果我将 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>
    );
  }
}

这是我的 select 组件文件。我也尝试过使用无状态版本，但结果是一样的，没有任何东西被 selected。

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>
    );
  }
}

谁能告诉我哪里出了问题？

Answer 1

Select 组件需要整个选定的选项对象作为 value 道具。如果将整个对象置于状态中，而不仅仅是 value 属性，它将起作用。

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

Answer 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}
/>

React select 不是 selecting 选项

React select is not selecting option

reactjs

react-select