时间戳

首页 > 解决方案 > Typeahead 中的更改事件不起作用

javascript - Typeahead 中的更改事件不起作用

问题描述

我正在尝试检查 typeahead 中的 Onchange 事件是否有效，但显然不是。这是代码：

class Search extends Component {
 state = {
      searchName: ''
}

handleNameChange(event) {
    this.setState({searchName: event.target.value})
    console.log('Name Change: ', event.target.value);
}

render() {
    return (
      <div class="form-group">
                    <Typeahead
                        id="basic-example"
                        options={this.state.hcpName}
                        placeholder="Search by Name..."
                        onChange={this.handleNameChange}
                    />
                </div>
)}
 }

这段代码有什么问题？当我在该字段中输入时，我在控制台中看不到任何内容。

标签： javascriptreactjsreact-bootstrap-typeahead

解决方案

我找到了一种直接更改状态而不是调用函数的方法。方法如下：

class Search extends Component {
state = {
  searchName: ''
}


 render() {
return (
  <div class="form-group">
                <Typeahead
                    id="basic-example"
                    options={this.state.hcpName}
                    placeholder="Search by Name..."
                    onInputChange={(searchName) => this.setState({searchName})}
                />
            </div>
    )}
  }

基本上，我使用 onInputChange 而不是 onChange，然后直接在 typeahead 内更改状态。

推荐阅读