运用

Question

我的React组件内部有一个简单的HTML输入标签，因此定义如下：

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

通过使用oninput ，每当文本框中的值发生更改时，我都希望使用文本框中的当前值作为参数来调用search方法。 因此，在同一组件中定义了search方法：

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

在Chrome开发工具中调试时，我看到该value具有以下值，而不是文本框中的当前值：

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

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

Answer 1

您的onInput函数的参数是一个JavaScript Event对象。 要提取它的值，您必须首先将输入框的值绑定到某些东西：

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

编辑：重命名搜索=> handleSearch以避免混淆:)