选择选项

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

谢谢Alon

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

小提琴在这里展示 https://jsfiddle.net/ab43je69/3/