Question

我尝试使用ButtonGroup实现多选，就像this link中第一个只使用react-bootstrap的例子一样。可能吗？主要目标是使用ButtonGroup进行多选行为，以用作网格中对象的过滤器。

Answer 1

当然有可能。 Here's a jsBin显示了切换选项的示例（我为自己的应用程序使用了类似的东西）。

从广义上讲，你需要做两件事; 1.管理选择选项/过滤器的状态2.根据此状态设置按钮的样式

以下是代码：

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')}>
          Option A
        </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'));

是否有可能让一个buttongroup行为像反应引导程序中的多选？

1 个答案: