所选选项中的下拉颜色

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 来调用函数并使样式等于状态

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

Fiddle 在这里显示 https://jsfiddle.net/ab43je69/3/

所选选项中的下拉颜色

dropdown color in choosen option

styles

reactjs

dropdown