所选选项中的下拉颜色答案

【问题标题】：dropdown color in choosen option所选选项中的下拉颜色
【发布时间】：2016-12-17 01:02:58
【问题描述】：

我正在使用 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>
       );
   }

谢谢阿隆

【问题讨论】：

标签： reactjs styles dropdown

【解决方案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/

【讨论】：