Как скрыть и показать содержимое списка: ReactJS

Question

У меня есть список элементов, если элемент щелкнул, он должен показать его содержимое. Нужно ли для каждого элемента списка boolean в объекте state, или я могу сделать это с добавлением и удалением classname, как в jquery?

Код:

<ul> 
    <li> item <div className="hidden"> some extra text ... </div> </li> 
    <li> item <div className="hidden"> some extra text ... </div> </li> 
    <li> item <div className="hidden"> some extra text ... </div> </li> 
    <li> item <div className="hidden"> some extra text ... </div> </li> 
</ul> 

Answer 1

Нужно ли мне для каждого элемента списка логическое значение в государственном объекте?

Да, вы должны поддерживать boolean для каждого элемента списка в state переменной, и на основе этого state значения, оказывают содержание list пунктов, Попробуйте это:

this.state = {showItems: []} 

onClick(index){ 
    console.log(index); 
    let showItems = this.state.showItems.slice(); 
    showItems[index] = !showItems[index]; 
    this.setState({showItems}); 
} 

<ul> 
    <li onClick={this.onClick.bind(this,0)}> item {this.state.showItems[0] ? <div> some extra text ... </div> : null} </li> 
    <li onClick={this.onClick.bind(this,1)}> item {this.state.showItems[1] ? <div> some extra text ... </div> : null}</li> 
    <li onClick={this.onClick.bind(this,2)}> item{this.state.showItems[2] ? <div> some extra text ... </div> : null} </li> 
    <li onClick={this.onClick.bind(this,3)}> item {this.state.showItems[3] ? <div> some extra text ... </div> : null}</li> 
</ul> 

Проверьте это рабочий Отрывок:

class App extends React.Component { 
 
    constructor(){ 
 
    super(); 
 
    this.state = {showItems:[]} 
 
    } 
 
     
 
    onClick(index){ 
 
    let showItems = this.state.showItems.slice(0); 
 
    showItems[index] = !showItems[index]; 
 
    this.setState({showItems}); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div className="App"> 
 
     <ul> 
 
      <li onClick={this.onClick.bind(this,0)}> item {this.state.showItems[0] ? <div> some extra text ... </div> : null} </li> 
 
      <li onClick={this.onClick.bind(this,1)}> item {this.state.showItems[1] ? <div> some extra text ... </div> : null}</li> 
 
      <li onClick={this.onClick.bind(this,2)}> item{this.state.showItems[2] ? <div> some extra text ... </div> : null} </li> 
 
      <li onClick={this.onClick.bind(this,3)}> item {this.state.showItems[3] ? <div> some extra text ... </div> : null}</li> 
 
     </ul> 
 
     <div style={{marginTop: 100}}>*click on item to open submenu</div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('container'));

li{ 
 
    cursor: pointer; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='container'/>

Проверить fiddle для рабочего примера: https://jsfiddle.net/mayankshukla5031/18hheyx1/

Answer 2

Вот очень простой в использовании библиотеки, которая позволяет определить условия на названиях класса. Библиотека также называется classnames

Например:

import classNames from 'classnames' 


<li> item 
    <div className={ classNames({ 
     'some-static-classname' : true, 
     'hidden'    : this.state.hiddenItems.includes('itemX') 
    }) } 
    > 
     some extra text ... 
    </div> 
</li> 

Так эта библиотека полезна только для уменьшения шаблонного на ваших условиях. Вам также нужны данные скрытых/показанных элементов. Вы можете сохранить такое состояние в реагировании внутреннего состояния. Тогда просто положите свои условия.

Вот еще один аналогичный question and answer Я ответил. Надеюсь, поможет.

Answer 3

Я думаю, вы должны использовать реакцию-бутстрап. иначе вы можете использовать состояние и обновить его вручную.

const accordionInstance = (
    <Accordion> 
    <Panel header="Collapsible Group Item #1" eventKey="1"> 
     test 
    </Panel> 
    <Panel header="Collapsible Group Item #2" eventKey="2"> 
    test 1 
    </Panel> 
    <Panel header="Collapsible Group Item #3" eventKey="3"> 
     test 2 
    </Panel> 
    </Accordion> 
); 

ReactDOM.render(accordionInstance, mountNode); 

Документ: https://react-bootstrap.github.io/components.html#panels-accordion