Реагировать - изменить изображение по клику - рефакторинг

Question

поэтому в моем приложении у меня есть 6 делений с теми же изображениями, которые я меняю при нажатии, но оно работает только с 6 различными функциями (как показано ниже), я знаю, что это можно сделать с помощью одной функции, в которой Я передаю реквизиты различным div, но я не могу заставить его работать, когда я делаю это 1 div, щелкает, изменяет изображения для всех остальных. Вот почему я сделал это с 6 различными государственными элементами. Может ли кто-нибудь подсказать мне, как этого добиться без репликации функций?

Вот функции

   toggleImage = () => {
    this.setState((state) => ({ open: !state.open }));
  };
  toggleImage2 = () => {
    this.setState((state) => ({ open2: !state.open2 }));
  };
  toggleImage3 = () => {
    this.setState((state) => ({ open3: !state.open3 }));
  };




  getImageName = () => (this.state.open ? dumbell : dumbellgrey);
  getImageNameTic = () => (this.state.open ? checkImg : "");

  getImageName2 = () => (this.state.open2 ? dumbell2 : dumbellgrey2);
  getImageNameTic2 = () => (this.state.open2 ? checkImg2 : "");

  getImageName3 = () => (this.state.open3 ? dumbell3 : dumbellgrey3);
  getImageNameTic3 = () => (this.state.open3 ? checkImg3 : "");

, и это то, что я отрисовываю

<div onClick={this.toggleImage} id={1}>
        <ImageBox>
            <DumbellImg src={imageName}></DumbellImg>
            <TickImg src={ticName}></TickImg>
        </ImageBox>
    </div>
    <div onClick={this.toggleImage2} id={1}>
        <ImageBox>
            <DumbellImg src={imageName}></DumbellImg>
            <TickImg src={ticName}></TickImg>
        </ImageBox>
    </div>
    <div onClick={this.toggleImage3} id={1}>
        <ImageBox>
            <DumbellImg src={imageName}></DumbellImg>
            <TickImg src={ticName}></TickImg>
        </ImageBox>
    </div>
``` etc.

Answer 1

Вы можете сделать это, как сказал @subransu, но я думаю, что всегда проще просто создать новый пользовательский компонент, то есть компонент ImageToggle:

const ImageToggle = () => {
  const [showImage, toggleImage] = useState(false);

  return showImage && (
    <div onClick={() => toggleImage(true)}>
        <ImageBox>
            <DumbellImg src={imageName}></DumbellImg>
            <TickImg src={ticName}></TickImg>
        </ImageBox>
    </div>
  );
}

Таким образом, вам не нужно отслеживать более сложная карта ключ / значение, поскольку каждый пользовательский компонент имеет свое собственное состояние.

Answer 2

Вы можете передать идентификатор изображения в качестве аргумента функции в общую функцию toggleImage.

<div onClick={()=>toggleImage(1)} id={1}>
              <ImageBox>
                <DumbellImg src={imageName}></DumbellImg>
                <TickImg src={ticName}></TickImg>
              </ImageBox>
</div>

Затем, в функции toggleImage установите состояние:

toggleImage = (id) => {
    this.setState((state) => ({ ["open" + id]: !state["open" + id] }));
};