Javascript 如何从React中的1 onClick功能访问多个按钮？

我已经创建了一个函数，单击按钮时将调用该函数。我想在两个按钮上使用它，但在实现它之后，当我单击一个按钮时，两个按钮同时被单击

这是一个函数，在单击

onClick

-

showMore=（）=>{
this.setState（（prevState）=>{
返回{showMore:！prevState.showMore}；
});
};

这是我用来调用这两个按钮的条件（我知道，我可以在这里做一些事情，使其仅为两个if条件，而不是4个，建议？）

if（！this.state.showMore）{
accounts=take（accounts['demo\u accounts']，默认的\u账号）；
}
if（this.state.showMore）{
accounts=accountsData['demo_accounts']；
}
如果（！this.state.showMore）{
卡号=
获取（卡号['demo_number']，默认的账户号）；
}
if（this.state.showMore）{
CardNumber=accountsData['demo_Number']；
}

我用它来做两个按钮，但是，两个按钮同时被点击，我知道我可以用一个ID来做按钮，但这看起来不太管用

总而言之，基本上有两个问题-

如何减少“如果”语句

如何阻止两个按钮都被单击

如何减少“如果”语句

只要结合类似的条件。由于所有条件基本上都是检查this.state.showMore的值，因此实际上只需要一个条件测试

if (this.state.showMore) {
  accounts = accountsData['demo_accounts'];
  cardNumbers = accountsData['demo_numbers'];
} else {
  accounts = take(accounts['demo_accounts'], DEFAULT_NO_OF_ACCOUNTS);
  cardNumbers =
    take(cardNumbers['demo_numbers'], DEFAULT_NO_OF_ACCOUNTS);
}

如何阻止两个按钮都被单击

当我想跨多个按钮使用单个常规单击处理程序时，我会使用一个高阶函数，这是一个返回函数的函数。所以在本例中，我创建了一个

clickHandler=id=>（）=>this.setState（{[id]：}）

此回调采用一个
id
参数，该参数在将回调附加到元素的onClick处理程序时使用，它会立即被调用并返回一个新函数，该函数实际用作回调，其
id
保存在存储模块中

<button onClick={this.clickHandler('a')>Button A</button>
<button onClick={this.clickHandler('b')>Button B</button>

按钮A
按钮B

下面是一个HOF处理程序的codesandbox示例

类似的答案，但您可以将其设置为每个按钮具有不同的ID并附加到不同的事件处理程序，如下所示：

<button id="btn1">Click me!</button>
<button id="btn2">Me too!</button>

您尝试过如何区分这两个按钮？从我所看到的，两个单独的按钮，点击时，做相同的事情，所以如果一个按下，它是相同的，如果另一个按下。您能否围绕第二段代码提供更多上下文（即完整函数和react组件代码），与您提到的任何按钮相关的内容和位置根本不清楚。1）这不是将事件侦听器附加到react组件的推荐方法，React维护自己的合成事件系统2）这使用两个回调函数，OP需要一个单击手柄谢谢-我没有完全读到OP要求React，我的答案适用于html。谢谢你的澄清，还有其他钩子吗？嗨@Brandon，我不相信React钩子会和回调函数有任何关系。你在好奇什么？对不起，我的意思是在reatchi@Brandon中使用功能组件做同样的事情，我还是不懂。回调函数在功能组件中的工作方式与在基于类的组件中的工作方式相同。但一次只能单击一个按钮。我确实看到你更新了你的问题，所以我相应地更新了我的答案。
const button1 = document.getElementById("btn1").addEventHandler('click', function);
const button2 = document.getElementById("btn2").addEventHandler('click', function2);