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 docs によると、これは次のようになります。

<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 に答える