Reagieren Conditional Rendering mit Staaten

Question

ich in einer Komponente arbeite, wo, wenn ich auf der ich eine andere Liste von Elementen

Funktion der

handleClick() { 
    this.setState({ 
    isActive: !this.state.isActive 
    }); 
}; 

Das Bedingte Rendering

if (isActive) { 
    SubList = <List hasIcons style="secondary"><ListItem><NavItem href={desktopUrl} title={title}><Icon name={name} />{title}</NavItem></ListItem></List> 
} 

Zustand zu ändern machen NavItem klicken

Die Liste NavItem und die {{SubList}}

<ListItem> 
    <NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}> 
     <Icon name={name} /> 
     {title} 
    </NavItem> 
    {SubList} 
</ListItem> 

sich hier die ganze Komponente

export default class SportNavItem extends React.Component { 

    constructor() { 
     super(); 
     this.state = {isActive: false}; 
     // This binding is necessary to make `this` work in the callback 
     this.handleClick = this.handleClick.bind(this); 
    }; 

    handleClick() { 
     this.setState({ 
     isActive: !this.state.isActive 
     }); 
    }; 

    render() { 

     const { title, desktopUrl, isActive, name } = this.props.data; 
     // props.childItems; { title, name, isActive, url } 

     // const itemId = `nav-${slugEn}`; 
     const style = isActive ? 'primary' : 'default'; 

     let SubList = null; 

     if (isActive) { 
     SubList = <List hasIcons style="secondary"><ListItem><NavItem isActive href={desktopUrl} title={title}><Icon name={name} />{title}</NavItem></ListItem></List> 
     } 

     return (
     <List hasIcons style={style}> 
      <ListItem> 
       <NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}> 
        <Icon name={name} /> 
        {title} 
       </NavItem> 
       {SubList} 
      </ListItem> 
     </List> 
    ); 
    } 
}; 

Die Komponente exportierte

const sampleData = { 
    title: 'Football', 
    name: 'football', 
    isActive: true, 
    desktopUrl: '#' 
} 

ReactDOM.render(
    <div> 
     <SportNavItem data = { sampleData }/> 
    </div>, 
    document.getElementById('app') 
); 

Wenn ich den Status manuell isActive-false ändern i die SubList machen kann. Ich kann nicht erreichen, den Status onClick zu behandeln, und ich sehe Fehler in der Konsole nicht. Was ist möglicherweise falsch? Gibt es einen besseren Weg?

Answer 1

Zum einen als @Jacob vorgeschlagen, Ihre Variable isActive ein state ist und kein prop. Sie sollten es wie Zweitens

const { title, desktopUrl, name } = this.props.data; 
const {isActive} = this.state; 

verwenden, wenn NavItem eine benutzerdefinierte Komponente erstellt ist, indem Sie dann onClick={this.handleClick} keine onClick Ereignis auf dem eher NavItem gesetzt als onClick als Stütze auf die NavItem Komponente zu übergeben. In der NavItem Komponente können Sie ein onClick-Ereignis für ein div haben, das wiederum die onClick-Funktion von den Requisiten aufrufen wird, die zu this.handleClick führen, die aufgerufen werden. Wenn Sie die NavItem Komponente in ReactBootstrap betrachten. Es hat eine onClick Requisite, die im Grunde dasselbe tun wird, wie ich oben vorgeschlagen habe

So technisch können Sie keine onClick Ereignis auf eine Komponente haben. Sie können die NavItem innerhalb eines div wickeln und dann ein onClick Ereignis festgelegt auf das

 <ListItem> 
     <div onClick={this.handleClick}> 
      <NavItem isActive href={desktopUrl} title={title} > 
       <Icon name={name} /> 
       {title} 
      </NavItem> 
      {SubList} 
     </div> 
    </ListItem> 

Answer 2

Sie versuchen isActive von this.props.data zu lesen:

const { title, desktopUrl, isActive, name } = this.props.data; 

... aber isActive ist in this.state. Wechseln Sie in diesem statt:

const { title, desktopUrl, name } = this.props.data; 
const { isActive } = this.state; 

Answer 3

Sie können nicht onClick auf benutzerdefinierte Komponente div. Wickeln Sie NavItem mit einem div, das die onClick-Methode hat.