反应 - 从目标获取价值[重复]

Question

这个问题在这里已有答案：

• Unable to access React instance (this) inside event handler 17答案

我想从输入中获取值，但我仍然得到'无法读取属性'目标'未定义'，我不知道为什么它不起作用。如果有人能解释我会感恩

import React from "react";

class Search extends React.Component {
    constructor(display) {
        super(display);
        this.state = {
            searchingText: ""
        };
    }

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

    handleKeyUp(event) {
        if (event.keyCode === 13) {
            this.props.onSearch(this.state.searchingText);
        }
    }

    render() {
        const styles = {
            fontSize: "1.5em",
            width: "90%",
            maxWidth: "350px"
        };
        return (
            <input
                type="text"
                onKeyUp={this.handleKeyUp}
                onChange={() => this.handleChange()}
                placeholder="Tutaj wpisz fraze"
                style={styles}
                value={this.state.searchTerm}
            />
        ); 
    }    
}

导出默认搜索;重新

Answer 1

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

onChange={this.handleChange}

第一个原因是你没有向this.handleChange传递论据，event应该是this。

---

此外，您需要调整这样的句柄函数，以保持handleChange(event) {的上下文：

从：

handleChange = (event) => {

至：

does not have its own this

原因是：箭头函数props，在这种情况下将引用该类，并将能够访问onChange={e => this.handleChange(e)} 。

Answer 2

快速但又脏的修复：

event

但是，这不是必要的，也不是最佳做法：

• 你不需要在这里传递onChange={this.handleChange} 对象。
• 在JSX属性中使用箭头函数很糟糕，因为它们将在此JSX元素的每个渲染中重新创建。

因此，您可以通过其参考使用该函数：

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

使用箭头功能

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

qazxswpoi