反应组件错误无法读取未定义的属性答案

【问题标题】：react component error Cannot read property of undefined反应组件错误无法读取未定义的属性
【发布时间】：2017-05-12 18:38:56
【问题描述】：

我是 React 新手，我创建了这样的组件；

export default class CartoviewDrawer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {open: false};
    }

    _handleToggle() {
        let open = this.state.open;
        this.setState({open: !open})
    }

    render() {
        return (
            <div>
                {/*<RaisedButton*/}
                {/*label="Toggle Drawer"*/}
                {/*onTouchTap={this.handleToggle}*/}
                {/*/>*/}
                <IconButton tooltip="Toggle Drawer"
                            onTouchTap={this._handleToggle}
                >
                    <i className="material-icons">list</i>
                </IconButton>
                <IconButton iconClassName="muidocs-icon-custom-github"/>
                <Drawer open={this.state.open}>
                    <MenuItem>Menu Item</MenuItem>
                    <MenuItem>Menu Item 2</MenuItem>
                </Drawer>
            </div>
        );
    }
}

在另一个文件中我通过 ; 导入这个组件

import CartoviewDrawer from './cartoview_drawer'

然后我使用这个组件：

React.createElement(AppBar,toolbarOptions,React.createElement(CartoviewDrawer))

但是当我点击浏览器控制台中的图标错误时，抽屉不会出现。错误：

未捕获的类型错误：无法读取未定义的属性“打开”

【问题讨论】：

设置this为_handleToggle, this._handleToggle.bind(this)，或者使用箭头函数() => this._handleToggle()
@AlexanderT。非常感谢你现在工作正常

标签： reactjs material-ui jsx

【解决方案1】：

在组件的构造函数中添加绑定：

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

【讨论】：

【解决方案2】：

您缺少与“this”的绑定将 onTouchTap 调用更改为：

onTouchTap={this._handleToggle.bind(this)}

【讨论】：