javascript - React-JS 类型错误 : Cannot read property 'setState' of undefined

Question

这个问题已经有答案了:

Unable to access React instance (this) inside event handler [duplicate] (19 个回答)

已关闭 5 年前。

如果我尝试在函数中调用 setState(编辑或保存)，我会收到“TypeError:无法读取未定义的属性“setState””。如果我声明一个箭头函数，它会起作用，但我不明白为什么？

import React, { Component } from 'react';

class Note extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editing: false
        }
    }

    edit (){
        this.setState({ editing: true })
    }

    save() {
        this.setState({ editing: false })
    }

    renderEditNote() {
        return (
            <div className="note">
                <textarea></textarea>
                <button onClick={this.save}>SAVE</button>
            </div>
        )
    }

    renderDisplayNote() {
        return (
            <div className="note">
                <p>{this.props.children}</p>
                <span>
                    <button onClick={this.edit}>Edit</button>
                    <button onClick={this.remove}>X</button>
                </span>
            </div>
        )
    }

    render() {
        return this.state.editing ? this.renderEditNote() : this.renderDisplayNote()
    }
}

export default Note

Answer 1

您需要bind this 用于edit 和save 功能，因此在被onClick 回调时不会丢失。

例如:

 <button onClick={this.edit.bind(this)}>Edit</button>

或者您可以在构造函数中执行以下操作:

this.edit = this.edit.bind(this);