1

这似乎应该非常简单，所以我必须遗漏一些明显的东西，但是当它被选中时，如何动态设置 ListGroupItem 上的活动道具？我有一系列

{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

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

<ListGroupItem href="#" active>

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

任何帮助将不胜感激。

4

1 回答 1

2

好吧，那是情绪的过山车。为了完成这项工作，我做了以下工作。每个 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);
},

它按预期工作。

于 2016-10-11T23:03:23.203 回答