搜索栏值更新和搜索

Question

我有一个使用输入字段的搜索栏，其中有一个 onkeyup function 工作正常。我想添加一个选项，当有人 cilcks 一些文本时，搜索值将被更新并且 onkeyup 将被调用，这意味着我想在搜索字段上添加文本并搜索该文本。 value is updating 但onkeyup is not calling。

class Search extends React.Component {
    constructor(props) {
       super(props)
       this.state = {
           searchValue : null
       }
       this.onChange = this.onChange.bind(this)
       this.onClickChange = this.onClickChange.bind(this)
    }

    onChange(e) {
        this.setState({
            searchValue: e.target.value
        })
    }
    onClickChange(e) {
        this.setState({
            searchValue: e.target.innerText
        });
    }

    search() {
        // working function no need to modify
    }

    render() {
        <input type="text" id="Search" className="form-control" placeholder="Search" onKeyUp={() => this.search()} onChange={this.onChange} value={this.state.searchValue}/>
        <span onClick={this.onClickChange}>CUSTOM</span>
    }
}

Answer 1

如果您想根据点击的文本进行搜索，则不应期望调用onKeyUp，因为该事件只是在您在input 中写入一些文本时调用。最好在classify 组件中使用setState 中存在的callback。因此，只需在单击文本时在onClickChange 的回调中调用您的搜索方法。你可以像下面这样使用这种方式：

  onClickChange(e) {
    this.setState({
      searchValue: e.target.innerText
    },()=>{
      this.search();
    });
  }  

Answer 2

我相信您的问题是您希望在激活onClickChange 时自动调用onKeyUp。通常它不应该，因为它们不是相关的事件。如果你想搜索onClickChange，那么在onClickChange函数体中指定：

onClickChange(e) {
    this.setState({
      searchValue: e.target.innerText,
    });
    this.search(e.target.innerText); // sending searchValue as parameter to search function
  }

我故意将e.target.innerText（searchValue）作为参数发送给search函数，因为this.setState不是同步的，并且可能会在search被调用后完成执行。我相信您在 search 函数上使用了 this.state.searchValue。您需要修改您的搜索功能以在调用时直接获取值：

search(searchValue) {
  // use searchValue here
  ...
}

您的输入不需要onKeyUp，只需像这样修改onChange：

<input type="text" id="Search" className="form-control" placeholder="Search" onChange={(e) => this.onChange(e.target.value)} value={this.state.searchValue} />

并像这样实现它：

onChange(searchValue) {
        this.setState({ searchValue })
        this.search(searchValue);
    }

这只是一种方法，如果这不能满足您的要求，请说出来，我将编辑我的答案。