Реагировать на выбор фильтров js - PullRequest
Новая
       10

Реагировать на выбор фильтров js

0 голосов
/ 06 ноября 2018

Я новичок, чтобы реагировать. Я выяснил, как сделать так, чтобы buttongroup действовала как мультиселект, но я не могу понять, как это сделать, если выбран хотя бы один фильтр, «Все» будет не выбран, а если нажать «Все», все фильтры не выбраны, «Все» тогда будет выбран?

Вот что у меня сейчас есть: https://jsbin.com/xiwuyemeva/edit?js,console,output

const Button = ReactBootstrap.Button;
const ButtonGroup = ReactBootstrap.ButtonGroup;

class Options extends React.Component {
  constructor(props) {
    super(props);
    this.toggleOption = this.toggleOption.bind(this);
    this.getBsStyle = this.getBsStyle.bind(this);
    this.state = {
      selected: {
        A: false,
        B: false,
        C: false,
      }
    }
  }

  toggleOption(e) {
    const key = e.target.value; // e.g. 'A'
    const value = !this.state.selected[key];
    const newSelected = Object.assign(this.state.selected, {[key]: value});
    this.setState({ selected: newSelected });
    console.log('this.state', this.state);
  }

  getBsStyle(key) {
   return this.state.selected[key] ? 'primary' : 'default';
  }

  render() {
    return (
      <ButtonGroup>
        <Button onClick={this.toggleOption} value='A' bsStyle={this.getBsStyle('A')}>
          All
        </Button>
        <Button onClick={this.toggleOption} value='B' bsStyle={this.getBsStyle('B')}>
          Option B
        </Button>
        <Button onClick={this.toggleOption} value='C' bsStyle={this.getBsStyle('C')}>
          Option C
        </Button>
      </ButtonGroup>
      );
  }
}

ReactDOM.render(<Options />, document.getElementById('app'));

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

1 Ответ

0 голосов
/ 06 ноября 2018

если бы я вас понял, вы бы хотели, чтобы только один стиль кнопки был primary. каждый другой будет default. тогда вот нормальное решение, которое я предоставил. 

const Button = ReactBootstrap.Button;
const ButtonGroup = ReactBootstrap.ButtonGroup;

class Options extends React.Component {
  constructor(props) {
    super(props);
    this.toggleOption = this.toggleOption.bind(this);
    this.state = {
      selected: {
        A:true,
        B:false,
        C:false,
      }
    }
  }

  toggleOption(e) {
    const key = e.target.value;
    let selected = JSON.parse(JSON.stringify(this.state.selected))
    if (key == 'A' && !selected.A) {
       selected.B = selected.C = false    
    }else if (key != 'A') {
      selected.A = false
    }
    selected[key] = !selected[key]
    this.setState({selected})
  }

  render() {
    const {selected} = this.state
    return (
      <ButtonGroup>
        <Button onClick={this.toggleOption} value='A' bsStyle={selected.A ? 'primary' : 'default'}>
          All
        </Button>
        <Button onClick={this.toggleOption} value='B' bsStyle={selected.B ? 'primary' : 'default'}>
          Option B
        </Button>
        <Button onClick={this.toggleOption} value='C' bsStyle={selected.C ? 'primary' : 'default'}>
          Option C
        </Button>
      </ButtonGroup>
      );
  }
}

ReactDOM.render(<Options />, document.getElementById('app'));

Демо: https://jsbin.com/topuwocosa/edit?js,console,output

...