javascript - react 未知 Prop 'onSearch'

Question

我正在尝试使用 onSearch像这样的搜索输入事件:

render(){
  return(

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

但我得到了 unknown prop error ，关于如何修复它的任何想法？

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

编辑:

onSearch 不是标准属性，所以我猜 React 不会支持它。由于 onSearch 与按回车键相同，因此使用 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 绝对是搜索类型 input 的 DOM 事件，但 React 还不支持它。 所以你可以收听原始 dom 元素事件。

这样做

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

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

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

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

我们没有使用addEventListener，而是使用ele.onsearch方式，因为组件会在props或state更新时重新渲染，每次调用渲染函数时我们都会附加当 search 事件触发处理函数时，dom 元素的事件可以运行多次。