選択肢のドロップダウンカラー

Question

私はreactjsを使用しています。 私は各値にスタイルでドロップダウンリストを作成しました。 オプションを選択したとき。ドロップダウンの先頭に色が表示されません。 これを修正するにはどうすればよいですか？ 私はドロップダウンにonChangeイベントを追加することができますが、私は関数に何を書くのか分からないことがわかります。

 render: function(){ 
     return (
      <div> 
       <input ref="textField"></input> 
       <select ref="dropDownColor" onChange={this.chageColor}> 
         <option>Color</option> 
         <option value="aqua" style={{color: 'aqua'}}>Blue</option> 
         <option value="red" style={{color: 'red'}}>Red</option> 
         <option value="orange" style={{color: 'orange'}}>Orange</option> 
         <option value="green" style={{color: 'green'}}>Greed</option> 
       </select> 
       <button onClick={this.addNote}>click</button> 
      </div> 
     ); 
    } 

おかげアロン

Answer 1

まず、あなたはこの

changeColor(e) { 
    this.setState({ 
     color: e.target.value 
    }) 
} 

のような状態を変更する関数を定義することができ

constructor(props) { 
    super(props); 
    this.state = {color: 'aqua'}; 
    } 

のようにコンストラクタで状態を定義します は

あなたは、レンダリング関数を呼び出すと https://jsfiddle.net/ab43je69/3/