выпадающий цвет в выбранном варианте

Question

Я использую реакцию. Я создал раскрывающийся список со стилем для каждого значения. Когда я выбрал вариант. цвет не отображается в раскрывающемся списке. Как я могу это исправить? Я знаю, что я могу добавить 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> 
     ); 
    } 

Благодаря Alon

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)}> 

Fiddle показывая это здесь https://jsfiddle.net/ab43je69/3/