带有 Active 属性的 ListGroupItem 单选样式 select

Question

这看起来应该非常简单，所以我一定遗漏了一些明显的东西，但是如何在选择 ListGroupItem 时动态设置 active 道具？我有一系列

{plans.map((plan) => (
    <ListGroupItem ref={plan.name} onClick={(event) => this.handleSelectedPlan(plan, event)}>
      {plan.public_name}: <span className="pull-right">{plan.amount.usd} / {plan.interval}</span>
    </ListGroupItem>))}

我假设我的 onClick 处理程序中包含以下内容：

this.refs[plan.name].active = true

就足够了，但它实际上并没有像文档的组件页面中那样突出显示它。相反，它在组件中创建并设置了一个 "active" 布尔值，但这显然不是应该发生的。根据 react-bootstrap 文档，它应该是这样的：

<ListGroupItem href="#" active>

我想我可以通过使用与设置它相同的原理手动取消设置其他设置来使其成为收音机样式设置。

如有任何帮助，我们将不胜感激。

Answer 1

好吧，那是情绪的过山车。为了完成这项工作，我做了以下工作。每个 ListGroupItem 声明为：

<ListGroupItem ref={plan.name} 
      href="#" 
      onClick={(event) => this.handleSelectedPlan(plan, event)} 
      active={this.state.planName == plan.name ? true : false}>

不要忘记设置初始状态：

getInitialState() {
  return { planName: "my_monthly_plan" };
},

onClick 处理程序如下所示：

handleSelectedPlan(plan, event) {
  event.preventDefault();

  this.setState({ planName: plan.name });
  this.props.chosenPlan(plan);
},

它按预期工作。

带有 Active 属性的 ListGroupItem 单选样式 select

ListGroupItem radio style select with Active prop

reactjs

react-bootstrap

meteor-react