React-Bootstrap 按钮的问题答案

【问题标题】：Problems with React-Bootstrap buttonReact-Bootstrap 按钮的问题
【发布时间】：2016-10-24 09:51:32
【问题描述】：

这就是我想要做的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。最后我的问题是如何更改我的值，我只点击一个按钮。

【问题讨论】：

您的示例似乎运行良好 - jsfiddle.net/69z2wepo/46535。但是最好像这样改变你的例子 - jsfiddle.net/69z2wepo/46534
感谢您的回答，我按照您说的做了。在 jsfiddle 中它正在工作，但在我的代码中不起作用。我想我遗漏了一些东西，所以唯一的区别是我有 import Button from 'real-bootstrap 而不是 var Buttons = window..... 而且我没有 <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"/> 因为我已经安装了 react-bootstrap。

标签： button reactjs typescript react-bootstrap buttongroup

【解决方案1】：

我建议如果您尝试通过更改它的 CSS 或添加一个显示它处于活动状态的 CSS 类来使项目处于活动状态，您可以这样做，这是一个基本示例，显示样式正在应用于基于元素的元素关于 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')
);

【讨论】：