Reactjs Material UI 状态在事件中未定义

Question

我正在使用 react 和 material ui 构建一个简单的应用程序

主要组件

'use strict';

import React from 'react';
import ProjectList from './projectlist';

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

    changeProject() {
    }

    render() {
        return <div className="row">
                <div className="col s3">
                    <ProjectList
                        onProjectChangeEvent={this.changeProject}/>
                </div>
            </div>;
    }
}

项目列表组件

'use strict';

import React from 'react';
import Card from 'material-ui/lib/card/card';
import CardHeader from 'material-ui/lib/card/card-header';
import CardText from 'material-ui/lib/card/card-text';
import FlatButton from 'material-ui/lib/flat-button';
import CardActions from 'material-ui/lib/card/card-actions';

// FIXME: Remove when react1.0 is launched
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

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

        this.state = {
            data: props.data || [],
            changeEvent: props.onProjectChangeEvent
        };
    }

    componentDidMount() {

    }

    openEdit = () => {
        console.debug(this.state);   
    }

    render() {
        return <Card>
                    <CardHeader
                        title="Super Project Title"
                        subtitle="Super Project Subtitle"/>
                    <CardText>
                        Something important
                    </CardText>
                    <CardActions>
                        <FlatButton
                            label="Edit"
                            onTouchTap={this.openEdit}/>
                    </CardActions>
                </Card>;
    }
}

当我单击 FlatButton 时，console.debug(this.state) == undefined？如何从 ProjectList 组件与 Application 组件进行通信？我想将项目对象发送回应用程序。在构造函数内部存在 props，componentDidMount 也是如此。但如果它是未定义的。怎么会？

更新 添加@taylorc93 建议的更改会在控制台中出现此错误

Uncaught (in promise) Error: http://localhost:3000/app/components/projectlist.js: Unexpected token (31:13)
  29 |     }
  30 | 
> 31 |     openEdit = () => {
     |              ^
  32 |         console.debug(this.state);   
  33 |     }

Answer 1

定义你的函数为

openEdit() {
  console.debug(this.state);   
}

然后你可以在构造函数中绑定它：

constructor(props) {
  super(props);
  this.openEdit = this.openEdit.bind(this);
}

并正常引用：

<FlatButton label="Edit" onTouchTap={this.openEdit} />

或者只是在你引用它时绑定它（无需更改构造函数）：

<FlatButton label="Edit" onTouchTap={this.openEdit.bind(this)} />

Answer 2

随着 ES6 类的变化，React 不再自动将 this 绑定到组件的所有方法，而只是将 render、构造函数和生命周期方法绑定。 https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

因此，当openEdit 被触发时，this 未设置为您的反应组件。解决这个问题的最简单方法是使用 ES6 箭头函数的巧妙技巧，如下所示：

openEdit = () => {
  console.debug(this.state);   
}

这利用了箭头函数提供的词法 this 绑定，并将 this 正确绑定到您的反应组件。这可能会让您感兴趣以进一步阅读：http://babeljs.io/blog/2015/06/07/react-on-es6-plus/

希望所有这些对您有所帮助！

Answer 3

这样写：

openEdit () {
     console.debug(this.state);   
   }