Как сделать общую функцию переключения, используя состояние?

Question

Как я могу (если это возможно) правильно настроить эту универсальную функцию Toggle для отображения модальных и условных визуализаций с использованием состояния?

Я получил синтаксические ошибки при попытках ..

toggle = (e) => {
let stateTarget = e.target.name;
this.setState({ [e.target.name]: !this.state.?})};

Answer 1

Вы можете использовать закрытие.

toggle = name => e => {
  this.setState(prev => ({ [name]: !prev[name] }));
}

И используйте вот так

onClick={toggle('name1'))
onClick={toggle('name2')

Answer 2

Вы можете использовать переменную stateTarget для доступа к текущему значению из состояния с помощью плоских скобок. Например:

toggle = e => {
    const stateTarget = e.target.name;
    this.setState({ [stateTarget]: !this.state[stateTarget] });
}

Также рекомендуется использовать функциональную версию setState, так что вы будете использовать самую последнюю версию состояния компонента, а не рисковать использованием устаревшей версии. Вы можете сделать это так:

toggle = e => {
    const stateTarget = e.target.name;
    this.setState(prevState => ({ [stateTarget]: !prevState[stateTarget] }));
}