在Reactjs组件中使用条件
在Reactjs组件中使用条件
提问于 2018-08-30 13:34:23
在我的代码示例中，每个按钮都必须在单击时显示不同的文本，这取决于父组件中的条件写入。
handlerButtons=()=> {
switch(this.props.id) {
case "id1": this.setState({text: "Text 1"}); break;
case "id2": this.setState({text: "Text 2"}); break;
case "id3": this.setState({text: "Text 3"}); break;
case "id4": this.setState({text: "Text 4"}); break;
case "id5": this.setState({text: "Text 5"}); break;
default: this.setState({text: "Text default"}); break;
}
}为什么单击任何按钮只显示默认文本？情况有什么问题吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-30 13:42:26
实际上，您在最重要的位置上缺少了onClick --它本身的按钮。您还在检查this.props.id的值，尽管id不在您的道具中。执行下列更改：
class MyButton extends React.Component {
onClickHandle = (e) => { this.props.onClick(e) }
render() {
return <button id={this.props.id} className="mybutton" onClick= {this.onClickHandle}>{this.props.label}</button>;
}
}将ButtonList更改为：
class ButtonsList extends React.Component {
render() {
return(
<ul>
{buttons.map((button)=> <MyButton id={button.id} label={button.label} onClick={this.props.handlerButtons}/>)}
</ul>
);
}
}最后，更改处理程序：
handlerButtons=(e)=> {
switch(e.target.id) {
case "id1": this.setState({text: "Text 1"}); break;
case "id2": this.setState({text: "Text 2"}); break;
case "id3": this.setState({text: "Text 3"}); break;
case "id4": this.setState({text: "Text 4"}); break;
case "id5": this.setState({text: "Text 5"}); break;
default: this.setState({text: "Text default"}); break;
}
} Stack Overflow用户
发布于 2018-08-30 13:45:56
因为，您将函数传递给MyButton组件，但不使用它，这意味着没有带有按钮元素的onClick处理程序，这就是原因所在。
不管我们传递给道具的数据/函数是什么，它们只是对象的条目，我们需要在某个地方使用它们。
如下所示：
<button
id={this.props.id}
className="mybutton"
onClick={this.props.click}
>
{this.props.label}
</button>建议：在传入道具时对处理程序函数使用相同的名称，以避免混淆。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52098407
复制相关文章
相似问题
腾讯云开发者
