反应-从目标中获取价值

时间:2018-09-04 20:41:19

标签: javascript reactjs events javascript-objects

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

value

导出默认搜索;重新

2 个答案:

答案 0 :(得分:1)

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

onChange={this.handleChange}

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


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

发件人:

handleChange(event) {

收件人:

handleChange = (event) => {

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

答案 1 :(得分:0)

快速但肮脏的修复程序:

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