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

Question

All of my components are the same here's a sample.

 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}

I want to trigger the only button that i clicked. I'm sorry i'm new at react js

My output wheneve i click the button it shows the code snippet text also on the above button toggle

Answer 1

Pass a different function for each button's onClick (ie onIconButtonClick, onSubmitButtonClick, etc.)

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

Then define the functions like this:

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

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

EDIT 1

try this

//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}

Answer 2

To each one be independent you could abstract the snippetCode to a component where each one has its own show state:

const CodeSnippet = ({ codeString }) => {
  const [show, setShow] = useState(false)

  return (
  <>
    <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
    }
  </>
  )
}

then you would call at your Parent component:

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>
            <CodeSnippet codeString={codeString} />