原因:
onClick事件如果包含() ,就会变成执行函数,页面加载后会自动执行, 从而导致这个结果
错误:
render() {
return (
<li onClick={() => { this.clickShow() }}>
<span>{this.props.list.title}:</span>
</li>
)
}
clickShow = () => {
alert(1)
}
解决:
1. 如果事件函数不需要参数,那么去除() 即可;
render() {
return (
<li onClick={this.clickShow}>
<span>{this.props.list.title}:</span>
</li>
)
}
clickShow = (value) => {
alert(value)
}
2. 如果事件函数需要参数,那么使用箭头函数包括即可;
render() {
return (
<li onClick={(value) => { this.clickShow(value) }}>
<span>{this.props.list.title}:</span>
</li>
)
}
clickShow = (value) => {
alert(value)
}