GreyCrew
@GreyCrew
Full-stack developer

Как соединить два Switch, с разными состояниями, когда при включении одного должен выключатся другой?

Есть два свитчера
<Switch
                        onChange={this.props.handleChangeWiFiSwitch}
                        value={this.state.WiFi}
                    />

и
<Switch
                        onChange={this.props.handleChangeBTSwitch}
                        value={this.state.isBT}
                    />


есть два события, при изменении которого изменяется значение value, при том при включении одного переключателя, должен выключаться другой, а при выключении другой включатся не должен.
Проблема в том, что когда я изменяю состояние другого происходит событие onChange другого и я лицезрею бесконечный цикл изменений состояний.
  • Вопрос задан
  • 218 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Cамый правильный вариант создать компонент SwitchGroup:
const options = [
  {
    value: 'wifi',
    title: 'WiFi',
  },
  {
    value: 'isBT',
    title: 'BT',
  },
];

class Expample extends Component {
  state = {
    switch = '',
  };

  handleChange = e => {
    const { name, value } = e.target;
    
    this.setState({
      [name]: value,
    });
  };

  render() {
    
    return (
      <Wrapper>
        <SwitchGroup
          onChange={this.handleChange}
          name="switch"
          value={this.state.switch}
          options={options}
        />
      </Wrapper>
    );
  }
}


Сам компонент написать просто

class SwitchGroup extends Component {
  ...
  handleClick(value) {
     const { name, onChange } = this.props;
     ...
     onChange({ 
       e: {
         target {
           name,
           value,
         },
       }
     });
  }

  render() {
    return(
      <Wrapper>
        {this.props.options.map((el, i) => (
          <Switch
           key={i}
           onClick={() => handleClick(el.value)}
           isActive={el.value === this.props.value}
           ...
          >
            {el.title}
          </Switch>
        ))}
      <Wrapper />
    );
  }
}

Тут надо немного дописать реализацию, показана сама идея.
Чем такое решение лучше. Оно просто масштабируется. handleChange абстрактный слушатель и может слушать все. А SwitchGroup вы сможете добавлять на страницу сколько захотите и с любым набором опций.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mannaro
@mannaro Куратор тега JavaScript
Умею профессионально гуглить
handleChangeWiFiSwitch() {
  this.setState({ WiFi: !this.state.WiFi, isBT: false });
}
handleChangeBTSwitch() {
  this.setState({ isBT: !this.state.isBT, WiFi: false });
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы