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

Question

[Сергей Сунцев]

Есть два свитчера

<Switch
                        onChange={this.props.handleChangeWiFiSwitch}
                        value={this.state.WiFi}
                    />

и

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

есть два события, при изменении которого изменяется значение value, при том при включении одного переключателя, должен выключаться другой, а при выключении другой включатся не должен.
Проблема в том, что когда я изменяю состояние другого происходит событие onChange другого и я лицезрею бесконечный цикл изменений состояний.

Answer 1

[Антон Спирин]

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 вы сможете добавлять на страницу сколько захотите и с любым набором опций.

Comments

[Сергей Сунцев]

Аналогично верхнему ответу.
Событие срабатывают попеременно и бесконечно, пока браузер не вывалится с "Maximum call stack size exceeded"

[Антон Спирин]

Сергей Сунцев, да, что-то не подумал, там же click надо слушать. Изменил ответ.

[Сергей Сунцев]

Антон Спирин, С onClick ломается логика перетаскивания, иначе я бы не стал заморачиваться с этим костыльным компонентом))

Пока писали ответ я сделал таким образом, и вроде работает. Как на ваш взгляд моё решение на много хуже?

<Switch
                        circleStyles={{onColor:'#4caf50',offColor:'white'}}
                        switchStyles={{width:100,background:'#ccc' }}
                        labels={{on:'ВКЛ',off:'ВЫКЛ'}}
                        onChange={this.props.handleChangeSwitch('isWiFi')}
                        value={this.state.isWiFi}
                    />

и

<Switch
                        circleStyles={{onColor: '#4caf50', offColor: 'white'}}
                        switchStyles={{width: 100, background: '#ccc'}}
                        labels={{on: 'ВКЛ', off: 'ВЫКЛ'}}
                        onChange={this.props.handleChangeSwitch('isBT')}
                        value={this.state.isBT}
                    />

а событие

handleChangeSwitch = (param) => (value) => {
        if(param === 'isBT' && value){
            this.setState({isBT : true, isWiFi : false})
        }

        if(param === 'isBT' && !value){
            this.setState({isBT : false})
        }

        if(param === 'isWiFi' && value){
            this.setState({isWiFi : true, isBT : false})
        }

        if(param === 'isWiFi' && !value){
            this.setState({isWiFi : false})
        }
    };

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

[Сергей Сунцев]

А группу создавать мне не получится, покуда данные элементы находятся в разных компонентах и состояние я на самом деле получаю через props, просто тут для примера это упустил.

[Антон Спирин]

Сергей Сунцев, не ясно, что за задача у вас. Ваше решение тяжеловато будет изменять если придется.
Думаю так будет лучше:

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

  handleChangeSwitch(value) {    
    this.setState(prevState => ({
      connectionType: prevState.connectionType === value ? '' : value,
    }));
  }

  render() {
    const { connectionType } = this.state;

    const switchParams = {
      circleStyles: { onColor: '#4caf50', offColor: 'white' },
      switchStyles:  { width: 100, background: '#ccc' },
      labels: { on: 'ВКЛ', off: 'ВЫКЛ' },
    };

    return (
      <Wrapper>
        <Switch
          {...switchParams}
          value={connetcionType === 'WiFi'}
          onChange={() => handleChangeSwitch('WiFi')}
        />
        <Switch
          {...switchParams}
          value={connetcionType === 'BT'}
          onChange={() => handleChangeSwitch('BT')}
        />
      </Wrapper>
    );
  }
}

Даже если это будет рулиться через редакс, будет всего одно значение connectionType и управлять им будет гораздо легче. Ну а при рендере Switch компонентов просто идет сверка текущего значения со значением которое передает компонент.

Answer 2

[Александр Вульф]

handleChangeWiFiSwitch() {
  this.setState({ WiFi: !this.state.WiFi, isBT: false });
}
handleChangeBTSwitch() {
  this.setState({ isBT: !this.state.isBT, WiFi: false });
}

Comments

[Сергей Сунцев]

я тоже так делал, но вот делаем мы в методе handleChangeWiFiSwitch isBT равное false, реакт видит, что состояние изменилось и вызывает метод handleChangeBTSwitch и так по кругу, поэтому данное решение не верно.

[Александр Вульф]

Сергей Сунцев, не будет он ничего вызывать

[Александр Вульф]

Сергей Сунцев, https://jsfiddle.net/gmh6jy2t/
Но я бы делал как-то так https://jsfiddle.net/gmh6jy2t/1/

[Сергей Сунцев]

Александр Вульф, take.ms/Fqyy6 Тем не менее вызывается...
примеры ниже аналогично. Думаю дело в том, что я использую react-flexible-switch

[Александр Вульф]

Сергей Сунцев, да, дело в этом (github).
С этого и надо начинать вопрос) Я бы выкинул эту библиотеку. Она - полный стрем.

[Сергей Сунцев]

Не спорю, но там прикольные эффекты, которые самому на css лепить стрём. ну в ответе выше я описал своё решение, оно подходит, смысл был в том, что я по аргументу определил, событие какого свитчера выполняется и выполняю только его.