reactjs карта и CSS класс тумблер

Question

 <div> 
    {this.props.data.map((res, index) => { 
     return (<div key={index}> 
     <div> 
      <span>{response.testData}</span> 
<a key={index} onClick={() => this.showExtraLine(index)}><span className={`btn-green ${this.state.showExtraLine ? 'active' : ''}`}></span></a> 
      { this.state.showExtraLine ? <span> 
      {res.abc[0].def} 
      </span> : '' } 
     </div> 
     </div> 
    ); 
    })} 
    </div> 
showExtraLine(e){ 
    this.setState({ 
     showExtraLine: !this.state. showExtraLine, 
    }); 
    } 

нужно переключить {res.abc [0] .def} часть по щелчку якоря - переключение работает, но не знаете, как обращаться с переключая только соответствующий срок - прямо сейчас скрывает все строки. Как обращаться с css переключением при использовании .map?

Answer 1

Я думаю, что проблема в вашем переменном состоянии, вы используете одну переменные состояния и печать <span> на основе состояния этого переменный. Вместо этого используйте массив в состоянии showExtraLine = [], в функции showExtraLine(), по которой вы передаете индекс, используйте этот индекс для переключения только этого элемента.

Попробуйте это должно работать:

{this.props.data.map((res, index) => { 
    return (<div key={index}> 
    <div> 
     <span>{response.testData}</span> 
     <a key={index} onClick={() => this.showExtraLine(index)}><span className={`btn-green ${!this.state.showExtraLine[index] ? 'active' : ''}`}></span></a> 
     { !this.state.showExtraLine[index] ? 
     <span>{res.abc[0].def}</span> 
     : '' } 
    </div> 
    </div> 
); 
})} 

showExtraLine(index){ 
    let showExtraLine = this.state.showExtraLine.slice(0); 
    showExtraLine[index] = !showExtraLine[index]; 
    this.setState({ 
     showExtraLine: showExtraLine, 
    }); 
} 

Answer 2

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

class Parent extends React.Component { 
    render() { 
    return (
     <div> 
     {this.props.data.map((res, index) => <Child key={index} {...res} />)} 
     </div> 
    ); 
    } 
} 

class Child extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     showExtraLine: false 
    }; 
    this.showExtraLine = this.showExtraLine.bind(this); 
    } 

    render() { 
    return (
     <div> 
     <div> 
      <span>{this.props.testData}</span> 
      <a key={index} onClick={this.showExtraLine}> 
      <span className={`btn-green ${this.state.showExtraLine ? 'active' : ''}`}></span> 
      </a> 
      { this.state.showExtraLine ? <span>{this.props.abc[0].def}</span> : '' } 
     </div> 
     </div> 
    ); 
    } 

    showExtraLine(e){ 
    this.setState({ 
     showExtraLine: !this.state.showExtraLine 
    }); 
    } 
}