Question

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

这是我的容器文件。如果删除val中的return( <div> <SelectComponent/>，这是select组件的值，它将显示我选择的任何内容，但我需要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>
    );
  }
}

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

Answer 1

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

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

Answer 2

1-没有理由进行任何异步/等待操作。那只会和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}
/>

反应选择不是选择选项

2 个答案: