javascript - 如何在反应中处理多个按钮单击，以知道单击了哪个

Question

我想知道如何在多个地方处理按钮单击事件。

我有Button组件，Home多次在组件中使用，当按钮单击时，它显示图像但显示在所有地方如何处理多个地方的点击事件，

class Button extends React.PureComponent{
  constructor(props){
   super(props);
  }
  render(){
  return(
    <button onClick={()=>this.props.toggle();}>Click Me</button>);
  }
}

class Button extends React.PureComponent{
  constructor(props){
   super(props);
    this.state={
    showImage: true
   }
  }

toggle(){
  this.setState({
    showImage: !this.state.showImage
  })
}

  render(){
    return(
     <div className="row">
      <div className="col-sm-6">
        <Button onClick={this.toggle}/>
        {this.state.showImage===true ? <img src="xyz.jpg"/> : ""}
      </div>
      <div className="col-sm-6">
        <Button onClick={this.toggle}/>
         {this.state.showImage===true ? <img src="xyz.jpg"/> : ""}
      </div>
     </div>
    )
  }

}

标签： javascriptreactjsobjectreduxreact-redux

Answer 1

我会将保持图像可见性的状态放入子组件中。该组件将负责 1 个图像、1 个按钮和该图像的状态。

function ToggleableImage({ imageSrc }) {
  const [isVisible, setVisibility] = React.useState(true);

  function toggleVisibility() {
    setVisibility(currentVisibility => !currentVisibility);
  }

  return (
    <div>
      <Button onClick={toggleVisibility} />
      {isVisible && <img src={imageSrc} />}
    </div>
  );
}

该组件接收您要显示为道具的图像。它具有isVisibile状态和toggleVisibility用于更新由按钮调用的状态的功能。

我已经为 state 使用了功能组件和React hooks，但是将 state 放到子组件的想法是相同的。

然后，您可以将多个这些组件添加到父级。

function Images() {
  return (
    <div className="row">
      <div className="col-sm-6">
        <ToggleableImage imageSrc="https://via.placeholder.com/150" />
      </div>
      <div className="col-sm-6">
        <ToggleableImage imageSrc="https://via.placeholder.com/150" />
      </div>
    </div>
  );
}

你可以在这里看到这个工作。