javascript - React Select-道具的setState(React Select - setState of prop)

Question

I am trying to set the state of my brandSelect prop in ReactJS using React Select however I am confused to how this can be done?

(我正在尝试使用React Select在ReactJS中设置brandSelect道具的状态，但是我对如何做到这一点感到困惑？)

Here is my current code:

(这是我当前的代码：)

class VehicleSelect extends React.Component {

  constructor(props) {
    super(props);

    this.state = { brandSelect: ""};

  }
  render() {
    var options = [
    { value: 'Volkswagen', label: 'Volkswagen' },
    { value: 'Seat', label: 'Seat' }
    ];


    return (
      <Select
          name="form-field-name"
          value={this.state.brandSelect}
          options={options}
          placeholder="Select a brand"
          searchable={false}
          onChange={}
      />
    )
  }
};

When the option is selected I want the state to be set as the option chosen.

(当选择选项时，我希望将状态设置为选择的选项。)

Does anybody know how this is done with React Select as the documentation doesn't really cover this?

(有人知道React Select是如何做到的，因为文档并没有真正涵盖这一点？)

So far I have tried making a function with a set state attached to the onChange prop however this didn't work.

(到目前为止，我已经尝试过将具有设置状态的函数附加到onChange道具上，但这是行不通的。)

  ask by Nick Maddren translate from so

Answer 1

You can try do add _onChange handler to your component, that will handle changes form <Select /> component.

(您可以尝试将_onChange处理程序添加到您的组件中，该处理程序将处理<Select />组件中的更改。)

class VehicleSelect extends React.Component {

  constructor(props) {
    super(props);

    this.state = { brandSelect: ""};

  }

  _onChange(value) {
    //console.log(value) - just to see what we recive from <Select />
    this.setState({brandSelect: value});
  }

  render() {
    var options = [
    { value: 'Volkswagen', label: 'Volkswagen' },
    { value: 'Seat', label: 'Seat' }
    ];


    return (
      <Select
          name="form-field-name"
          value={this.state.brandSelect}
          options={options}
          placeholder="Select a brand"
          searchable={false}
          onChange={this._onChange.bind(this)}
      />
    )
  }
};