下拉颜色选择选项

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/