时间戳

首页 > 解决方案 > 我有多个 onClick 按钮，每当我单击 1 个按钮时，所有相同的按钮都会触发。反应

reactjs - 我有多个 onClick 按钮，每当我单击 1 个按钮时，所有相同的按钮都会触发。反应

问题描述

我的所有组件都相同，这是一个示例。

 const [show, setShow] = useState(false);

  

    return (
        <Box align="center">
            <Box pb={2}>
                <Box align="left">
                    <h1>UI Elements</h1>
                </Box>
                <Card>
                    <CardContent>
                        <h2 align = 'Left'><FormatColorFillIcon/> Colors</h2>
                        <hr/>
                        <App/>
                    </CardContent>
                </Card>
                <IconButton onClick={()=> setShow(!show)} aria-label="Hello sir" align = "right">
                <CodeIcon/>
                </IconButton>
                { show ? 
                    <div><Paper className = {classes.paperColor}>
                            <SyntaxHighlighter classes = {classes.paperColor} language="javascript" style={docco} align = "left" style = {dracula}> 
                                {codeString}
                            </SyntaxHighlighter>
                        </Paper>
                    </div> : null}

我想触发我点击的唯一按钮。对不起，我是 react js 的新手

当我单击按钮时，我的输出也会在上面的按钮切换上显示代码片段文本

标签： reactjsmaterial-ui

解决方案

为每个按钮的 onClick 传递不同的函数（即 onIconButtonClick、onSubmitButtonClick 等）

<IconButton onClick={onIconButtonClick} aria-label="Hello sir" align = "right">

然后像这样定义函数：

const onIconButtonClick = () => {
  setShow(!show)
}

const onSubmitButtonClick = () => {
  //logic to submit
}

编辑 1

尝试这个

//for first icon button
<IconButton id="thing1" onClick={onIconButtonClick} aria-label="Hello sir" align = "right"></IconButton>


//for second icon button
<IconButton id="thing2" onClick={onIconButtonClick} aria-label="Hello sir" align = "right"></IconButton

const onIconButtonClick = (event) => {
  switch(event.currentTarget.id) {
    case "thing1":
      setShowThing1(!showThing1);
      break;
    case "thing2":
      setShowThing2(!showThing2);
      break;
    //...
    

  }
}


{ showThing1 ? 
   <div>
     <Paper className = {classes.paperColor}>
       <SyntaxHighlighter classes = {classes.paperColor} language="javascript" style={docco} align = "left" style = {dracula}> 
           {codeString}
       </SyntaxHighlighter>
     </Paper>
   </div> : 
  null}

推荐阅读