javascript - 将 <input oninput= ... 与文本框中的当前值一起使用

Question

我的 React 组件中有一个简单的 HTML 输入标签，定义如下:

<input type="text" onInput={(value) => {
                search(value);
                return value;
            }}/>

通过使用 oninput , 我希望调用 search方法，当文本框中的值发生变化时，以文本框中的当前值作为参数。 search方法在同一个组件中这样定义:

const search = _.debounce((value) => {
                    doSomething(value);
                 }, 500);

当我在 Chrome Dev Tools 中调试时，我看到 value具有以下值，而不是文本框中的当前值:

[[Handler]]: Object
[[Target]] : SyntheticEvent
[[IsRevoked]] : false

我做错了什么？如何调用搜索并将文本框中的当前值作为参数提供给它？在线实例展示oninput像<input type="text" oninput="myFunction()">一样被使用, 但它们没有显示如何将文本框中的值作为输入传递给在 oninput 上调用的函数事件。

Answer 1

onInput 函数的参数是一个 JavaScript Event 对象。要提取它的值，你必须首先将输入框的值绑定(bind)到一些东西上:

<input
  type="text"
  value={this.state.value}
  onInput={this.handleSearch}
/>

然后在您的组件方法中，使用 event.target 提取此值，这允许您查看 DOM 元素属性(我们需要 value 属性):

handleSearch(event) {
  this.setState({value: event.target.value});
  this.search(event.target.value); // Or wherever your search method is
}

编辑:重命名 search => handleSearch 以避免混淆 :)