为什么 Material-UI Appbar onLeftIconButtonTouchTap 不起作用? [英] Why Material-UI Appbar onLeftIconButtonTouchTap is not work?
问题描述
我正在学习 React-Redux、Material-UI.
现在,我正在尝试创建示例应用程序,但不起作用.
我不知道如何改进我的代码.
我想打开 Drawer ,当 Material-UI AppBar onLeftIconButtonTouchTap 被点击时.
我想我无法将我的 Action 绑定到组件.
当以下代码运行时,不会触发 onLeftIconButtonTouchTap 事件.
当我将 openDrawer 更改为 openDrawer() 时,在 Chrome 开发工具上发现了 JS 错误openDrawer 不是函数".
Header.jsx 作为组件
import React, { PropTypes } from 'react';从 'material-ui/AppBar' 导入 AppBar;从'material-ui/Drawer'导入抽屉;常量标题 = ({打开抽屉,打开}) =>(<div><应用栏标题='样本'onLeftIconButtonTouchTap = {() =>打开抽屉}/><抽屉停靠={假}打开={打开}/>
)Header.PropTypes = {openDrawer: PropTypes.func.isRequired,打开:PropTypes.bool.isRequired}导出默认标题;
HeaderContainer.jsx 作为容器
从'react'导入React;从redux"导入 { bindActionCreators }从'react-redux'导入{连接};从'../actions'导入{标题}从'../components/Header'导入标题;const mapStateToProps = (状态) =>({打开});const mapDispatchToProps = (dispatch) =>({openDrawer: bindActionCreators(header, dispatch)});const HeaderContainer = 连接(mapStateToProps,mapDispatchToProps)(标题);导出默认的 HeaderContainer;
App.jsx 作为 RootComponent
import React, { Component, PropTypes } from 'react';从'../components/Header'导入标题;从react-tap-event-plugin"导入injectTapEventPlugin;从'material-ui/styles/baseThemes/lightBaseTheme'导入baseTheme;从'material-ui/styles/getMuiTheme'导入getMuiTheme;注入TapEventPlugin();类 App 扩展组件 {构造函数(道具){超级(道具);}getChildContext() {返回 { muiTheme: getMuiTheme(baseTheme) };}使成为() {返回 (<div><标题/>{this.props.children}
);}};App.childContextTypes = {muiTheme:React.PropTypes.object.isRequired,};导出默认应用程序;
提前致谢.
您没有正确绑定函数.您需要将代码更新为
在此处详细了解 .bind()
方法:使用JavaScript 'bind' 方法
Im studying React-Redux, Material-UI.
Now, Im trying to create Sample App, but not work.
I dont know how to improve my code.
I want to open Drawer , when Material-UI AppBar onLeftIconButtonTouchTap is clicked.
I cant bind my Action to Component, I think.
When following code is running, not fire onLeftIconButtonTouchTap event.
And when I change openDrawer to openDrawer(), JS error 'openDrawer is not a function' is found on Chrome Dev tool.
Header.jsx as a Component
import React, { PropTypes } from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
const Header = ({
openDrawer,
open
}) => (
<div>
<AppBar
title='sample'
onLeftIconButtonTouchTap = {() => openDrawer}
/>
<Drawer
docked={false}
open={open}
/>
</div>
)
Header.PropTypes = {
openDrawer: PropTypes.func.isRequired,
open: PropTypes.bool.isRequired
}
export default Header;
HeaderContainer.jsx as a Container
import React from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import { header } from '../actions'
import Header from '../components/Header';
const mapStateToProps = (state) => ({open});
const mapDispatchToProps = (dispatch) => (
{openDrawer: bindActionCreators(header, dispatch)}
);
const HeaderContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Header);
export default HeaderContainer;
App.jsx as a RootComponent
import React, { Component, PropTypes } from 'react';
import Header from '../components/Header';
import injectTapEventPlugin from "react-tap-event-plugin";
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
injectTapEventPlugin();
class App extends Component {
constructor(props) {
super(props);
}
getChildContext() {
return { muiTheme: getMuiTheme(baseTheme) };
}
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
};
App.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};
export default App;
Thanks in advance.
You are not binding the function correctly. You need to update your code to
<AppBar
title='sample'
onLeftIconButtonTouchTap = { openDrawer.bind(this) }
/>
More about .bind()
method here: Use of the JavaScript 'bind' method
这篇关于为什么 Material-UI Appbar onLeftIconButtonTouchTap 不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!