Question

我是新来的人。我想出了如何使按钮组像多选功能一样工作，但我不知道如何做到这一点，如果至少选择了一个过滤器，则“全部”将不被选中，如果单击“全部”，则所有过滤器都将不被选中，“全部”然后会被选中？

这是我目前拥有的： 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'));

我将如何处理这些事件的任何想法或指导原则将受到感激

Answer 1

如果我了解您，则您只希望一种按钮样式为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

React JS过滤器选择

1 个答案: