Question

当用户在输入文本字段中输入时，我尝试更新Datalist中的值，我是ReactJS的新手，我尝试了这段代码，但它无效：

var MyList = React.createClass({
getInitialState: function() {
    return {
        options: [<option key={'taste'} value={'zeitwert'}>{'Name'}</option>]
    }
},
changeHandler: function(e) {
    console.log('In changeHandler');
    this.state.options.push(
      <option key={'some_key2'} value={'some_value2'}>{'Second Option'}</option>,
      <option key={'some_key3'} value={'some_value3'}>{'Third Option'}</option>
      );
},
render: function() {
    return (
      <div>
        <input type="text" className="form-control" onChange={this.changeHandler} placeholder="Owner" list="slist" name="owner_id" />
        <datalist id="slist">{this.state.options}</datalist>
      </div>
    )
}

}）;

我没有收到任何错误消息，并且console.log行正常，但第二个和第三个选项不会出现在列表中。

我做错了什么？ THX！

更新

此代码有效：

  changeHandler: function(e) {
    console.log('In changeHandler');
    tmp = [];
    tmp.push(
      <option key={'some_key2'} value={'some_value2'}>{'Second Option'}</option>,
      <option key={'some_key3'} value={'some_value3'}>{'Third Option'}</option>
      );
    this.setState({options: tmp});
   },

谢谢伊利亚！

Answer 1

只是更改状态不会触发UI更新。您需要通过调用setState或此处描述的其他函数告诉React状态已更改：https://facebook.github.io/react/docs/component-api.html

Answer 2

我设法通过react-html-datalist像datalist一样使用select

使用reactJS更改Datalist中的选项

2 个答案: