下拉顏色選擇選項

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

首先定義狀態構造像

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

然後你就可以定義改變這樣

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

狀態的功能

您可以選擇在渲染這樣定義調用函數，並有風格等於狀態

<select style={{color: this.state.color}} ref="dropDownColor" onChange={this.changeColor.bind(this)}> 

小提琴顯示此位置 https://jsfiddle.net/ab43je69/3/