blocks|key|661743|text|实际上，您在最重要的位置上缺少了onClick+--它本身的按钮。您还在检查this.props.id的值，尽管id不在您的道具中。执行下列更改：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|661744|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>;++++
++++}
}|code-block|syntax|javascript|661745|将ButtonList更改为：|661746|class+ButtonsList+extends+React.Component+{+

++++render()+{

++++++++return(
++++++++<ul>
++++++++++++{buttons.map((button)=>+<MyButton+id={button.id}+label={button.label}+onClick={this.props.handlerButtons}/>)}+++++++++++
++++++++</ul>
++++++++);++
++++++}
++++}|661747|最后，更改处理程序：|661748|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;
++++}
}+++|661749|entityMap^0|G|7|12|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

You're actually missing <code>onClick</code> on the most import place - the button it self . You're also checking the value of <code>this.props.id</code> though the id isn't in your props. Do the following changes:

<pre><code>class MyButton extends React.Component { 
 onClickHandle = (e) =&gt; { this.props.onClick(e) }
 render() { 
 return &lt;button id={this.props.id} className="mybutton" onClick= {this.onClickHandle}&gt;{this.props.label}&lt;/button&gt;; 
 }
}
</code></pre>

Change ButtonList to this:

<pre><code>class ButtonsList extends React.Component { 

 render() {

 return(
 &lt;ul&gt;
 {buttons.map((button)=&gt; &lt;MyButton id={button.id} label={button.label} onClick={this.props.handlerButtons}/&gt;)} 
 &lt;/ul&gt;
 ); 
 }
 }
</code></pre>

And lastly, change your handler:

<pre><code>handlerButtons=(e)=&gt; {
 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;
 }
} 
</code></pre>

blocks|key|661770|text|因为，您将函数传递给MyButton组件，但不使用它，这意味着没有带有按钮元素的onClick处理程序，这就是原因所在。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|661771|不管我们传递给道具的数据/函数是什么，它们只是对象的条目，我们需要在某个地方使用它们。|661772|如下所示：|661773|<button
++++id={this.props.id}
++++className="mybutton"
++++onClick={this.props.click}
>
++++++++{this.props.label}
</button>|code-block|syntax|javascript|661774|建议：在传入道具时对处理程序函数使用相同的名称，以避免混淆。|BOLD|661775|工作守则。|661776|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/anon/pen/mGOjQx^0|A|8|0|0|0|0|0|3|0|0|5|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|17|8|@$9|18|A|19|B|Q]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|T|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

Its because, You are passing the function to <code>MyButton</code> component but not using it, means there is no onClick handler attached with button element that's why. 

Whatever the data/function we pass in props they will be just the entries of the object, we need to use them somewhere.

Like this:

<pre><code>&lt;button
 id={this.props.id}
 className="mybutton"
 onClick={this.props.click}
&gt;
 {this.props.label}
&lt;/button&gt;
</code></pre>

Suggestion: Use the same name for handler function when passing in props to avoid confusion.

<a href="https://codepen.io/anon/pen/mGOjQx" rel="nofollow noreferrer">Working Code.</a>

In my study example of code every button must display different text on click depending on condition writing in parent component. 

<pre><code> handlerButtons=()=&gt; {
 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;
 }
}
</code></pre>

Why does the click on any button display only default text? What is wrong with condition?

Using condition in Reactjs components

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在我的代码示例中，每个按钮都必须在单击时显示不同的文本，这取决于父组件中的条件写入。 handlerButtons=()=> {    switch(this.props.id) {        case "id1": this.setState({text: "Text 1"}); break;        ca...

问在Reactjs组件中使用条件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Reactjs组件中使用条件EN