Блог

Моя цель — переключать выключение и включение в соответствии с соответствующим идентификатором, но я не смог переключить переключатель.

я пробовал таким образом:

    <Switch
                  checked={data.isShow}
                  onChange={this.handleChange}
                  color="primary"
                  name={data.isShow ? "On" : "Off"}
                  inputProps={{ "aria-label": "primary checkbox" }}
                />
        
  

И onChange я написал таким образом:

   handleChange = () => {
    this.setState({ isShow: !this.state.isShow });
  };

  

Вот пример

Кто-нибудь может мне помочь в этом запросе?

Вы должны handleChange для определенного элемента. Здесь я передаю идентификатор элемента и переключаю isShow только этот элемент

 handleChange = (id) => {
  this.setState({
    info: this.state.info.map((i) => {
      if (i.id === id) {
        return {
          ...i,
          isShow: !i.isShow
        };
      } else {
        return i;
      }
    })
  });
};

// ...

<Switch
  checked={data.isShow}
  onChange={() => this.handleChange(data.id)}
  color="primary"
  name={data.isShow ? "On" : "Off"}
  inputProps={{ "aria-label": "primary checkbox" }}
/>
  

Разветвленная демонстрация

Нет необходимости в переменной состояния, просто обновите информационный массив в handleChange(). Ниже приведены изменения в методе handleChange()

 handleChange = (singleRowData) => {
    console.log(singleRowData);
    const {info} = this.state;
    const index = info.findIndex(data => data.id === singleRowData.id);
    info[index].isShow = !info[index].isShow;
    this.setState({ info: [...info] });
  };
  

Измените handleChange функцию на:

 handleChange = (event) => {
let changeId = parseInt(event.target.id);
let info = this.state.info.map((data) => {
  if (data.id === changeId) {
    return Object.assign({}, data, {
      isShow: !data.isShow
    });
  }
  return data;
});
this.setState({info: info});
};
  

Включить id как часть параметров компонента

 <Switch
  checked={data.isShow}
  onChange={this.handleChange}
  id={data.id}
  color="primary"
  name={data.isShow ? "On" : "Off"}
  inputProps={{ "aria-label": "primary checkbox" }}
/>
  

Редактировать:
Внес изменения в предоставленный вами образец ссылки — он работает здесь

Вам нужно изменить isShow свойство элемента в info массиве (в вашем состоянии).

вы можете использовать find() , чтобы найти элемент с тем же id ,
но перед этим вам нужно использовать slice() для копирования info массива, потому что вы не изменяете свое состояние.

Никогда не изменяйте this.state напрямую, так как вызов setState() впоследствии может заменить сделанную вами мутацию. Обрабатывайте this.state так, как если бы он был неизменяемым.

(Ссылка из React docs)

тогда ваш handleChange() метод должен выглядеть так:

 handleChange = (id) => {
    const data = this.state.info.slice();
    const item = data.find((item) => item.id === id);
    item.isShow = !item.isShow;
    this.setState(data);
  };
  

Вот полный результат:
https://codesandbox.io/s/async-bird-998ue ?fontsize = 14amp;hidenavigation = 1amp;theme= темный