javascript - react 未知的 Prop 'onSearch'

我试图在这样的搜索输入上使用onSearch事件:

render(){
  return(

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

但是我得到了unknown prop error，如何解决它的任何想法？

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

编辑:

onSearch不是标准属性，因此我想反应不会支持它。由于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);
    }
  }
}

最佳答案

search绝对是搜索类型input的DOM事件，但react还不支持。
因此您可以收听原始的dom元素事件。

像这样

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

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

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

并且在将真实dom挂载到文档之前，该函数也将被执行，但是由于没有元素可以附加事件，因此我们使用(element||{})避免错误。

而不是使用addEventListener，我们使用ele.onsearch方式，因为组件将在props或状态更新时重新呈现，因此每次调用render函数时，当search事件触发处理程序函数可以运行多次时，我们会将事件附加到dom元素上。

关于javascript - react 未知的 Prop 'onSearch'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43195995/