我在一个组件中工作,如果我点击NavItem
我渲染另一个元素列表
改变状态的功能
handleClick() {
this.setState({
isActive: !this.state.isActive
});
};
条件渲染
if (isActive) {
SubList = <List hasIcons style="secondary"><ListItem><NavItem href={desktopUrl} title={title}><Icon name={name} />{title}</NavItem></ListItem></List>
}
List NavItem和{{SubList}}
<ListItem>
<NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}>
<Icon name={name} />
{title}
</NavItem>
{SubList}
</ListItem>
这里是整个组件
export default class SportNavItem extends React.Component {
constructor() {
super();
this.state = {isActive: false};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
};
handleClick() {
this.setState({
isActive: !this.state.isActive
});
};
render () {
const { title, desktopUrl, isActive, name } = this.props.data;
// props.childItems; { title, name, isActive, url }
// const itemId = `nav-${slugEn}`;
const style = isActive ? 'primary' : 'default';
let SubList = null;
if (isActive) {
SubList = <List hasIcons style="secondary"><ListItem><NavItem isActive href={desktopUrl} title={title}><Icon name={name} />{title}</NavItem></ListItem></List>
}
return (
<List hasIcons style={style}>
<ListItem>
<NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}>
<Icon name={name} />
{title}
</NavItem>
{SubList}
</ListItem>
</List>
);
}
};
导出的组件
const sampleData = {
title: 'Football',
name: 'football',
isActive: true,
desktopUrl: '#'
}
ReactDOM.render(
<div>
<SportNavItem data = { sampleData }/>
</div>,
document.getElementById('app')
);
如果我手动将状态isActive
更改为false
,我可以呈现SubList
。我无法实现处理状态onClick
,我在控制台中看不到错误。可能有什么问题?还有更好的方法吗?
答案 0 :(得分:1)
您正试图阅读isActive
中的this.props.data
:
const { title, desktopUrl, isActive, name } = this.props.data;
...但isActive
位于this.state
。改为改为:
const { title, desktopUrl, name } = this.props.data;
const { isActive } = this.state;
答案 1 :(得分:0)
首先,您的变量isActive
是state
而不是prop
。你应该像
const { title, desktopUrl, name } = this.props.data;
const {isActive} = this.state;
其次,如果NavItem
是您创建的自定义组件,则onClick={this.handleClick}
不会在onClick
上设置NavItem
事件,而不是将onClick
作为道具传递给NavItem
组件。在NavItem
组件中,您可以在div上创建一个onClick事件,该事件将从道具调用onClick
函数,从而调用this.handleClick
。如果您查看NavItem
中的ReactBootstrap
组件。它有一个onClick
道具基本上和我上面提到的一样
从技术上讲,您不能在任何组件上发生onClick
事件。您可以将NavItem
包装在div中,然后在该div上设置onClick
事件
<ListItem>
<div onClick={this.handleClick}>
<NavItem isActive href={desktopUrl} title={title} >
<Icon name={name} />
{title}
</NavItem>
{SubList}
</div>
</ListItem>
答案 2 :(得分:0)
您不能onClick
自定义组件。使用具有onClick
方法的div包装NavItem。