Question

这看起来应该非常简单，所以我必须忽略一些明显的东西，但是如何在选择时动态设置ListGroupItem上的活动prop？我有一系列的

{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

就足够了，但实际上并没有突出显示它，如文档的组件页面所示。相反，它创建并设置一个＆＃34; active＆＃34;组件中的布尔值，但这显然不是应该发生的事情。根据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 prop选择ListGroupItem无线电样式

1 个答案: