反应选择 - 道具的setState

Question

我想使用React Select在ReactJS中设置我的brandSelect道具的状态，但是我很困惑如何做到这一点？

这里是我当前的代码：

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={} 
     /> 
    ) 
    } 
}; 

当选项被选中我想作为选项选择的状态的情况下。

有没有人知道这是怎么用React Select完成的，因为文档没有真正涵盖这个？到目前为止，我已经尝试使用onChange支持附加设置状态的函数，但是这不起作用。

Answer 1

您可以尝试添加_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)} 
     /> 
    ) 
    } 
}; 

Answer 2

试试这个：

class VehicleSelect extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
     brandSelect: "" 
     }; 

    } 
    onSelectChanged(value) { 
     this.setState({ 
     brandSelect: value 
     }); 
    } 
    render() { 
     var options = [{ 
      value: 'Volkswagen', 
      label: 'Volkswagen' 
     }, { 
      value: 'Seat', 
      label: 'Seat' 
     }]; 

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

你需要一个onChange事件处理程序。将参数传递给事件处理函数，在此情况下，该函数将为Select输入的选定值，然后将brandSelect的状态设置为所选值。