反应未知道具“onSearch”

Question

我正在尝试在搜索输入上使用onSearch事件，如下所示：

render(){
  return(

  <input type="search" onSearch={ () => console.warn('search') }  />
  );
}

但我收到未知的 prop 错误，有什么解决办法吗？

我想创建一个自动完成输入，当用户单击键盘中的“搜索”图标时触发事件。

编辑：

onSearch 不是一个标准属性，所以我想 React 不会支持它。由于 onSearch 与按 Enter 键相同，因此使用 onKeypress 即可完成此工作：

render() {
  return (
    <main>
      <input onKeyPress={ this.onKeyPress } type="search" list="options"/>
      <datalist id="options">
        { OPTS.map(item => <option value={ item.nm } key={ item.id } data-id={ item.id } />) }
      </datalist>
    </main>
    );
  }


onKeyPress(event) {
  if (event.key === 'Enter') {
    const id = document.querySelector(`#options   option[value="${event.target.value}"]`).dataset.id;
    if (id) {
      console.warn('user search', id);
    }
  }
}

Answer 1

search绝对是搜索类型的 DOM 事件input，但 React 还不支持。所以你可以监听原始 dom 元素事件。

这样做

<Input
  ref={element=>(element||{}).onsearch=this.searchHandler}
/>

这可行，您可能想知道为什么。

首先，ref属性接受一个函数作为值，该函数将使用真实 dom 元素（与虚拟 dom 相对）执行。

在真正的 dom 被挂载到文档之前，该函数也会被执行，但是没有我们可以附加事件的元素，所以我们使用它(element||{})来避免错误。

addEventListener我们不使用，而是使用ele.onsearchway ，因为组件会在 props 或状态更新时重新渲染，每次调用渲染函数时，我们都会将一个事件附加到 dom 元素，当search事件触发时，处理函数可以运行多次。

Answer 2

我想你正在寻找onChange。当您编辑其中的数据时，输入将触发更改事件。

编辑： React DocsonSearch不支持您可以使用 keypress 事件或 keyup 事件来执行相同的操作。只需检查键码并查看是否为回车键 (13)

handleKeyPress = (e) => {
    if(e.keyCode === 13) {
        console.warn('search');
    }
}

<input type="search" onKeyPress={this.handleKeyPress} />