как обрабатывать несколько нажатий кнопок в реагировать, чтобы знать, что нажимается

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

}

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 для обновления состояния, которое вызывается кнопкой.

Я использовал функциональные компоненты и React-хуки для состояния , но идея переноса состояния на дочерний компонент такая же.

Затем можно добавить несколько этих компонентов к родительскому.

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>
  );
}

Вы можно увидеть это работает здесь.