Изменение активного элемента в списке с помощью реакции

Question

У меня есть список элементов, созданных с помощью массива, который реагирует. На клике пользователя, как я могу активировать элемент clicked (добавив класс css), в то время как другие элементы вводятся (путем удаления активного класса)?

Мой рендеринг elemetns выглядит следующим образом.

{this.props.people.map(function(person, i){ 
     <div className='media' key={i} onClick={state.handleClick.bind(state,i,state.props)}> 
      <item className="media-body">{person.name}</item> 
     </div> 
    } 

На клике пользователя одного из этих элементов активного класса будет добавлен к элементу, по которым щелкнули «СМИ» Заставить щелкнул элемент «СМИ активно» при удалении «активный» класса от ранее щелкнул элемента ??

Answer 1

constructor(props) { 
    super(props); 
    this.state = { activeIndex: 0 }; 
    } 

    handleClick(index, props) { 
    // do something with props 
    // ...  

    // now update activeIndex 
    this.setState({ activeIndex: index }); 
    } 

    render() { 
    return (
     <div> 
     { 
      this.props.people.map(function(person, index) { 
      const className = this.state.activeIndex === index ? 'media active' : 'media'; 
      return (
       <div className={className} key={index} onClick={handleClick.bind(this, index, this.props)}> 
       <item className="media-body">{person.name}</item> 
       </div> 
      ); 
      }, this) 
     } 
     </div> 
    ); 
    } 

Answer 2

В вашем handleClick метод, который вы могли бы сохранить в состоянии компонента щелкнув человека (выглядит как коллекция людей). Затем установите className условно, основываясь, скажем, на идентификаторе человека.

Вы можете установить имя, используя что-то вроде:

className={this.state.clickedPersonId === i ? 'media media--clicked' : 'media'} 

(NB Это использование я, индекс элемента в людей массива, вы можете использовать что-то немного больше явно, как реальный идентификатор человека.)

Answer 3

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

Вы можете создать небольшой субкомпонент, который просто возвращает элемент, который вы хотите добавить функциональность так же, как это:

... 
this.state = { 
active: false 
} 
... 
return(
    <div className=`media ${this.state.active ? 'active' : ''` onClick={()=>{this.setState({active: true})}}> 
     <item className="media-body">{this.props.name}</item> 
    </div> 
) 
... 

И в функции карты вы просто передать содержимое как свойства:

{this.props.people.map(function(person, i){ 
    <SubComponent key={i} {...person} /> 
    } 

Таким образом, вы остаетесь с чистым кодом в «корневом» компоненте и можете добавить сложности к вашему подкомпоненту.