ReactJS：onChangeイベントのない小道具のデフォルト値で選択しますか？

Question

ReactのselectコンポーネントでonChangeイベントハンドラを絶対に必要としているのではないかと思っていましたか？

私は選択したいオプションのデフォルト値を渡す小道具を持っています。私はjQueryのを使用して値を取得していたよう

Warning: Failed form propType: You provided a `value` prop to a form field without an `onChange` handler. 
This will render a read-only field. 

すると、私はドン」：私はあなたがエラーに精通している確信しているとして、それは静的である

<select 
    value={this.props.defaultValue} 
> 
    <option value="a">A</option> 
    <option value="b">B</option> 
</select> 

除い：私が持っている場合、それは何の問題も働きません子どもと親の間に状態や通行が必要です...

選択肢が小道具からデフォルト値を取得する簡単な方法はありますか？オプションを変更することで可能な値を変更する通常の選択肢としても動作しますjqueryを取得するか、または状態とonChangeハンドラを持つ必要がありますか？

ありがとうございます！

は、私はすでに試みている何を：-選択に反応...私は単にデフォルト値を選択し、通常のを持ちたいようにも

<select 
    defaultValue={this.props.defaultValue} // just returns the first option 
> 
    <options etc.> 
</select> 

が、私はむしろ外部のパッケージを使用していないだろう...

Answer 1

、あなたは制御されていないコンポーネントでの選択の現在の値を取得する代わりに、jQueryのの参照を使用することができます。他の部分については

class MySelect extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { currentValue: this.props.defaultValue }; 
    } 

    updateValue() { 
    this.setState({ currentValue: this.refs.myselect.value }); 
    } 

    render() { 
    return (
     <div> 
     <div> 
      <button className="current" onClick={this.updateValue.bind(this)}>{this.state.currentValue}</button> 
     </div> 

     <select ref="myselect" defaultValue={this.props.defaultValue}> 
      <option value="a">A</option> 
      <option value="b">B</option> 
      <option value="c">C</option> 
     </select> 
     </div> 
    ); 
    } 
} 

、defaultValueはあなたがしようとしていたと同じように動作するはずです。

この例を確認してください：https://jsfiddle.net/y64gbhf8/1/

Answer 2

あなたはUncontrolled Components

を試すことができますが、状態更新、DOMは は、あなたはDOM

からフォームの値を取得するには、REFを使用することができ、それを処理するためのイベントハンドラを記述する必要はありません@julienが言及したよう3210