Reagieren Bootstrap-Panel benutzerdefinierte heading- Zusammenbruch erweitern nicht

Question

arbeiten Ich versuche Reagieren Bootstrap panelgroup (Akkordeon) mit Radio-Buttons

Ich möchte einen benutzerdefinierten Header zu verwenden. Daher habe ich Header mit meinem benutzerdefinierten Header ersetzt. Nach dem Verwenden der benutzerdefinierten Kopfzeile funktioniert die Funktion zum Minimieren der Maximierung nicht mehr.

-Code (Custom header)

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> 
    ) 
} 

Panel:

  <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> 

Was bin ich?

Vielen Dank im Voraus

Answer 1

Wenn ein Element mit JSX Syntax Aufruf der Objekttyp erzeugt hat keine „Kinder“ als Stütze, und ich denke, reagieren-Bootstrap-Panel nicht richtig, dass die Situation umgehen kann.

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

Daher wird, wie dieses Problem zu umgehen, können Sie Ihre benutzerdefinierten Header wickeln im Panel Kopfstütze auf 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') 
) 

Als Randbemerkung, ich denke, Sie sollten Ihre benutzerdefinierte eine stateless Komponente Header machen , weil es für die Komponente keinen Sinn hat, ihren eigenen Zustand zu kennen. Verwenden Sie einfach Props in PanelHeaderCustom und steuern Sie die Instanzen mit dem Status der Haupt-App.

Wenn Sie diese Komponente staatenlos machen, können Sie Ihrer Komponente Code eine als reine Funktion ohne dass unnötige div Umbruch schreiben:

// 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> 
) 
} 

Dann Kopfstütze ist die Funktion Panel aufrufen:

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