React Select - 小道具のセットステート

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 propに設定された状態を設定して関数を作成しようとしましたが、これは機能しませんでした。

Answer 1

<Select />コンポーネントを処理するコンポーネントに_onChangeハンドラを追加してみてください。

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の状態を選択した値に設定します。