コンポーネント選択値を選択して反応選択を更新しません。

Question

私がここで間違っていることをちょっと疑問に思います。リストから値を選択すると、コンポーネント入力フィールドに値が入力されていません。

class Search extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     name: 'order_select_field', 
     placeholder: "Make a selection", 
    } 
} 

componentWillMount() { 
    fetch('http://apirequest.com') 
     .then(function(response) { 
      return response.json(); 
     }) 
     .then(function(json) { 
      this.setState({options: json}); 
     }.bind(this)) 
    } 

handleChange(event) { 
    this.setState({ }) 
} 

render() { 
    return (
     <div> 
      <Select 
       name={this.state.name} 
       options={this.state.options} 
       placeholder={this.state.placeholder} 
      /> 
     </div> 
    ) 
} 

}

Answer 1

あなたの主な問題は、あなたのhandleChange方法はバニラ<select>コンポーネントで値

handleChange = (event) => { 
    this.setState({ 
    ...this.state, 
    value: event.target.value 
    }) 
} 

を設定していない、onChangeイベントがevent.targetでDOMElementの参照を持っているでしょうし、反応すると、DOM要素のvalue小道具があなたの状態を更新するために使用できます。サードパーティ製の<Select>コンポーネントは、異なるイベント署名または期待値を持つ可能性があります。

また、使用しているライブラリがわからないので、自分の値を "yourSelectKey"として追跡する状態キーを提供しましたが、これを正しいキーに置き換えることができます。ネストされたプロパティ（オブジェクトの一部）の場合、他の値も同様にコピーされるようにスプレッド演算子を追加する必要があります。

そして、選択コンポーネントにonChangeイベントハンドラを追加する必要があります。そのライブラリを使用する代わりに、react docsに従うことをお勧めします。あなたが直面している

<select 
    value={this.state.value} 
    onChange={this.handleChange}> 
    name={this.state.name}> 

    <option value="value1">Value 1</option> 
    <option value="value2">Value 2</option> 
    <option value="value3">Value 3</option> 

</select> 

その他の問題：

• あなたがオブジェクトインスタンスにhandleChangeをバインドする必要があります。上記のように、コンストラクタでthis.handleChange = this.handleChange.bind(this)という行を使用するか、またはインスタンス変数としてhandleChangeを宣言することで、これを行うことができます。コメント者として、
• と言っていますが、あなたはcomponentWillMountでfetch呼び出しを行うべきではありませんが、componentDidMountを使うべきです。これは初心者にとってよくある間違いです。