Reactjs材料UI状态不定事件

Question

我建立使用反应和材料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>; 
    } 
} 

ProjectList组件

'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组件中的应用程序组件通信？我想将项目对象发送回应用程序。在构造函数中存在道具，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类改变了这种错误，阵营不再自动绑定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); 
    }