は私がラジオボタンでカスタムヘッダーをしたいブートストラップpanelgroup（アコーディオン）</p> <p>を反応させるのに使用しようとしています

Question

を働いていないの崩壊を展開heading-ブートストラップパネルカスタムを反応します。したがって私は私のカスタムヘッダーにヘッダーを置き換えました。カスタムヘッダーを使用した後、展開の折りたたみが機能しなくなりました。

コード（カスタムヘッダ）

constructor(props) { 
    super(props); 
    this.state = { 
     isSelected: false, 
    }; 
} 

componentWillMount() { 
    if (this.props.isSelected) { 
     this.state = {isSelected:true}; 
    } else { 
     this.state = {isSelected: false}; 
    }   
} 

componentWillUpdate() { 
    if (this.props.isSelected) { 
     this.state = {isSelected:true}; 
    } else { 
     this.state = {isSelected: false}; 
    } 
}  

render() { 
    let radio = 
     <span> 
      <input type="radio" className="accordion_checkbox" name={this.props.name} /> 
      {this.props.header} 
     </span> ; 
    if (this.state.isSelected) { 
     radio = <span> 
      <input type="radio" className="accordion_checkbox" defaultChecked name={this.props.name} /> 
      {this.props.header} 
     </span> 
    } 
    return (
     <div> 
      {radio} 
     </div> 
    ) 
} 

パネル：

  <PanelGroup className="payment-accordion" activeKey={this.state.activeKey} onSelect={e => this.handleSelect(e)} accordion> 
       <Panel header={<PanelHeaderCustom name="saved_card" isSelected={this.state.activeKey === "savedCards"} header="SAVED CARD"/>} eventKey="savedCards"> 
        <SwipableCards savedCards={this.props.savedCards}/> 
       </Panel> 
       <Panel header={<PanelHeaderCustom name="debit_card" isSelected={this.state.activeKey === "creditDebitCards"} header="DEBIT CARD"/>} eventKey="creditDebitCards">Debit/Credit Card</Panel> 
       <Panel header={<PanelHeaderCustom name="net_banking" isSelected={this.state.activeKey === "netbanking"} header="NET BANKING"/>} eventKey="netbanking">Debit/Credit Card</Panel> 
      </PanelGroup> 

私は何をしないのですか？事前に

おかげで

Answer 1

JSX構文を持つ要素を呼び出して、生成されたオブジェクトタイプは、小道具として「子供」を持っていない、と私は反応し、ブートストラップ・パネルが正しくそのような状況を扱うことができないと思います。

<PanelHeaderCustom /> // returns Object { type: PanelHeaderCustom(), props: { header:"NET BANKING", isSelected: false, name: "net_banking" } } 

したがって、回避策として、あなたはパネルヘッダー小道具でdivのためにカスタムヘッダーをラップすることができます：

側の注意点として

class PanelHeaderCustom extends Component { 
    render() { 
    return (
     <span> 
     <input 
      type='radio' 
      className='accordion_checkbox' 
      checked={this.props.isSelected} 
      name={this.props.name} /> 
     {this.props.header} 
     </span> 
    ) 
    } 
} 

export default class Test extends Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     activeKey: '' 
    } 
    } 

    handleSelect (e) { 
    this.setState({ 
     activeKey: e 
    }) 
    } 

    render() { 
    return (
     <div> 
     <PanelGroup 
      className='payment-accordion' 
      activeKey={this.state.activeKey} 
      onSelect={(e) => this.handleSelect(e)} 
      accordion> 
      <Panel 
      header={ 
       <div> 
       <PanelHeaderCustom 
        name='saved_card' 
        isSelected={this.state.activeKey === 'savedCards'} 
        header='SAVED CARD' /> 
       </div> 
      } 
      eventKey='savedCards'> 
      <div>Example</div> 
      </Panel> 
      <Panel 
      header={ 
       <div> 
       <PanelHeaderCustom 
        name='debit_card' 
        isSelected={this.state.activeKey === 'creditDebitCards'} 
        header='DEBIT CARD' /> 
       </div> 
      } 
      eventKey='creditDebitCards'> 
      Debit/Credit Card 
      </Panel> 
      <Panel 
      header={ 
       <div> 
       <PanelHeaderCustom 
        name='net_banking' 
        isSelected={this.state.activeKey === 'netbanking'} 
        header='NET BANKING' /> 
       </div> 
      } 
      eventKey='netbanking'> 
      Debit/Credit Card 
      </Panel> 
     </PanelGroup> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(
    <Test />, 
    document.getElementById('main') 
) 

、私はカスタムはステートレスコンポーネントヘッダ作るべきだと思いますコンポーネントがそれ自身の状態であることを知る必要はないからです。 PanelHeaderCustomで小道具を使用し、主アプリの状態でインスタンスを制御するだけです。

あなたは、そのコンポーネントがステートレス作るとき、あなたは不要なのdiv-ラッピングを必要とせずに、純粋な関数としてコンポーネントのコードaを書くことができます。

// Returns { type: "span", props: { children: [ { type: "input"... }, "SAVED_CARD" ] } } 
function PanelHeaderCustom (
    header, 
    name, 
    isSelected 
) { 
    return (
    <span> 
    <input 
     type='radio' 
     className='accordion_checkbox' 
     checked={isSelected} 
     name={name} /> 
    {header} 
    </span> 
) 
} 

そして、パネルのヘッ​​ダー小道具で関数を呼び出す：

<Panel 
    header={ 
    PanelHeaderCustom(
     'SAVED CARD', 
     'saved_card', 
     this.state.activeKey === 'savedCards' 
    ) 
    } 
    eventKey='savedCards'> 
    <div>Example</div> 
</Panel>