Question

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

render(){
  return(

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

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

我想创建一个自动完成输入，当用户点击＆＃34;搜索＆＃34;键盘上的图标。

修改

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);
    }
  }
}

Answer 1

search绝对是搜索类型input的DOM事件，但反应还没有支持它。所以你可以听原始的dom元素事件。

喜欢这个

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

这可行，你可能想知道原因。

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

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

我们不使用addEventListener，而是使用ele.onsearch方式，因为组件将在props或state更新时重新呈现，每次调用render函数时，我们都会在{{}时将事件附加到dom元素{1}}事件触发了处理函数可以运行几次。

Answer 2

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

编辑： React Docs不支持onSearch您可以使用keypress事件或keyup事件来执行相同的操作。只需检查键码，看看它是否输入（13）

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

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

Answer 3

我认为这样的事情应该有效：

constructor() {
  this.state = { userInput: "" };

  this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit() {  
    console.warn('user search', this.state.userInput);
}

render() {
  return (
    <form onSubmit={handleSubmit}>       
      <input 
        onChange={e => this.setState({userInput: e.target.value})} 
        type="search" 
        list="options" 
        value={this.state.userInput}
      />
      <datalist id="options">
        { OPTS.map(item => <option value={ item.nm } key={ item.id } data-id={ item.id } />) }
      </datalist>
    </form>
  );
}

看看https://facebook.github.io/react/docs/forms.html。您可能希望使用受控组件而不是直接访问DOM来获取输入值。

反驳未知道具＆＃39; onSearch＆＃39;

3 个答案: