反應選擇 - 道具的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的狀態設置爲所選值。