Question

我写了这个React组件：

import React from 'react';

export default class Todo extends React.Component {
    constructor(props) {
        super(props);

        // Set initial state
        this.state = {
            data: props.data
        }
    }

    changeStatus() {
        // This throws: Uncaught TypeError: Cannot read property 'state' of undefined
        console.log(this.state);
        console.log('status changed');
    }

    render() {
        let status = this.state.data.opened ? 'opened' : 'closed';
        return (
            <li className={"todo " + status} data-endpoint={this.state.data['@id']}>
                <div className="status">
                    <input type="checkbox" checked={!this.state.data.opened} onChange={this.changeStatus}/>
                </div>
                <a href={window.Routing.generate('todo_list_todo_show', {account: this.props.todoList.account.id, list: this.props.todoList.id, todo: this.state.data.id}, true)}>{this.state.data.name}</a>
            </li>
        );
    }
}

我希望选中并取消选中该复选框，具体取决于对服务器的调用以更新数据库中的行。

不幸的是console.log()引发了异常：

未捕获的TypeError：无法读取属性＆＃39; state＆＃39;未定义的

在changeStatus（Todo.jsx：20）

如何在处理状态更改的方法中访问state？

Answer 1

在构造函数中绑定changeStatus方法 -

constructor(props) {
        super(props);

        // Set initial state
        this.state = {
            data: props.data
        }
        this.changeStatus = this.changeStatus.bind(this);

    }

您可以阅读为何需要绑定here。

Answer 2

如果您使用的是ES6，则可以避免使用箭头功能键入绑定。

这种方式<html> <head> <title> OLL </title> </head> <body> <div id="foo"></div> <script type=text/javascript> var img = new Image(); var div = document.getElementById('foo'); img.onload = function() { div.appendChild(img); }; img.src = 'bone.jpg'; </script> </body> </html>会自动绑定到函数。

this

箭头函数在词汇上绑定它们的上下文，因此changeStatus = () => { // This throws: Uncaught TypeError: Cannot read property 'state' of undefined console.log(this.state); console.log('status changed'); }实际上是指原始背景。

React：如何选中和取消选中复选框

2 个答案: