Question

我想从输入中获取值，但是我仍然得到“无法读取未定义的属性” target”，而且我也不知道为什么它不起作用。如果有人可以解释我会很感激

value

导出默认搜索；重新

Answer 1

您将想要将onChange={() => this.handleChange()}更改为：

onChange={this.handleChange}

首要原因是您没有将参数传递给this.handleChange。event。

此外，您将需要像这样调整句柄函数，以保持this的上下文：

发件人：

handleChange(event) {

收件人：

handleChange = (event) => {

原因是：箭头函数does not have its own this，在这种情况下将引用该类，并且能够访问props。

Answer 2

快速但肮脏的修复程序：

onChange={e => this.handleChange(e)}

但是，这不是必需的，也不是最佳实践：

您无需在此处传递event对象。
在JSX属性中使用箭头功能很糟糕，因为将在此JSX元素的每次渲染中重新创建它们。

因此，您可以仅通过参考使用该功能：

onChange={this.handleChange}

通过这种用法，您将在方法中获得event对象。但是，为了在此方法中使用this上下文，必须将其绑定。您可以通过两种方式执行此操作：

在构造函数中

constructor(props) {
    super(props);
    this.state = {
        searchingText: ""
    };
    this.handleChange = this.handleChange.bind( this );
}

使用箭头功能

您可以将方法定义为粗箭头，因为它们不会创建词法范围：

handleChange = (event) => {
        let searchingText = event.target.value;
        this.setState({
            searchingText: searchingText
        });
        if (searchingText.length > 2) {
            this.props.onSearch(searchingText);
        }
}

反应-从目标中获取价值

2 个答案: