React-Bootstrap 按钮的问题

Question

这就是我想要做的事情 https://react-bootstrap.github.io/components.html#btn-groups 但是当我点击其中一个按钮时我想要调用另一个函数

<ButtonGroup>
    <Button onClick = {this.onSubmit.bind(this,1)} key={1} active = {this.state.i == 1}>LEFT</Button>
    <Button onClick = {this.onSubmit.bind(this,2)} key={2} active = {this.state.i == 2}>MIDDLE</Button>
    <Button onClick = {this.onSubmit.bind(this,3)} key={3} active = {this.state.i == 3}>RIGHT</Button>
</ButtonGroup>


  onSubmit(new_i: number) {
    this.setState({
       i: new_i  
    });
  }

我只想一次激活一个按钮，即我单击的按钮。 i 的默认值为 1。因此，当我启动程序时，“左”按钮处于活动状态，而其他 2 个按钮则没有，这正是我想要的。但是在我无法点击其他按钮之后，因为该值始终为 1。最后我的问题是如何更改我的值，只有我点击一个按钮。

Answer 1

我建议，如果您试图通过更改 CSS 或添加 CSS class 来显示它处于活动状态，从而使它处于活动状态，您可以这样做，这是显示基于 i.

的状态将样式应用于元素的基本示例

https://jsfiddle.net/chrshawkes/64eef3xm/

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

var Hello = React.createClass({
  getInitialState: function () {
   return { i: 1 }
  },
  onSubmit: function (value) {
    this.setState({ i: value })
  },
  render: function() {
    return (
      <div>
        <div onClick = {this.onSubmit.bind(this,1)} key={1} style = {this.state.i == 1 ? {color: "red"} : {color: "blue"}}>LEFT</div>
        <div onClick = {this.onSubmit.bind(this,2)} key={2} style = {this.state.i == 2 ? {color: "red"} : {color: "blue"}}>MIDDLE</div>
        <div onClick = {this.onSubmit.bind(this,3)} key={3} style = {this.state.i == 3 ? {color: "red"} : {color: "blue"}}>RIGHT</div>
      </div>
      )
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

React-Bootstrap 按钮的问题

Problems with React-Bootstrap button

button

reactjs

typescript

react-bootstrap

buttongroup