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以避免混淆：）