在React JS中，使用react-select希望在未選中復選框后將選項設置為默認值

Question

我正在嘗試取消選中復選框並將選擇值重置為默認值后禁用選擇列表。但是我看到了我選擇的一個。 我在這里使用React-select作為選擇和選項。

APP.js

const adultOptions = [{ value: '1', label: '1' },{ value: '2', label: '2' }];
class App extends Component {
  state = {
    disableSelect2: true
  }

  selectDisableHandler2 = () => {
    const showSelect = this.state.disableSelect2;
    this.setState({ disableSelect2: !showSelect });

  }

  render() {
    return (
      <>
        <div className="Container">
          <div>
            <table style={{ borderStyle: "solid" }}>
              <caption style={{ borderStyle: "inherit" }}>
                <input type="checkbox" 
                onClick={this.selectDisableHandler2} />Room 2</caption>
              <tbody>
                <tr>
                  <th>Adult (18+)</th>
                  <th>Children (0-17)</th>
                </tr>
                <tr>
                  <td>
                  <Select
                    options={adultOptions} 
                    isDisabled={this.state.disableSelect2}
                    defaultValue={this.state.disableSelect2 ? adultOptions[0] : null}/>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
       </div>       
      </>
    );
  }
}

export default App;

```[In the image after unchecking checkbox, the options value is set to "2" which I selected, but I wanted it to be default value i.e. "1" ][1]


  [1]: https://i.stack.imgur.com/S5gjP.png

Answer 1

您需要在組件狀態下處理選擇的值：

<Select
  value={this.state.selectedOption}
  isDisabled={this.state.disableSelect2}
  options={adultOptions}
  onChange={this.handleChange}
/>

讓復選框處理程序相應地對其進行更新：

selectDisableHandler2 = () => {
  const showSelect = this.state.disableSelect2;
  this.setState({
    disableSelect2: !showSelect,
    selectedOption:
      showSelect === true ? this.state.selectedOption : adultOptions[0]
  });
};

代碼框：

https://codesandbox.io/s/6l2171x37n