Question

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

public ActionResult Comment(string commentId){
     var data=(from p in db.commentdb
     join q in db.profileImage
     on p.Email equals q.Email
     where p.commentId==commentId
     select new
    {
     Name=p.Fullname,
     Comment=p.Comment
     ImagePath=q.ImagePath
     });
    return Json(data,jsonrequestbehavior.allowget)
   }

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

Answer 1

我建议如果您尝试通过更改CSS或添加显示其活动的CSS类来激活项目，您可以执行类似的操作，这是一个基本示例，表明样式正在应用于基于元素在我的状态。

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按钮出现问题

1 个答案: