reactjs는

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

앵커의 클릭에 일부 {[0] .DEF res.abc}을 전환 할 필요가지도와 CSS 클래스 토글 바로 지금 모든 행을 숨기고 .. 어떻게 모자를 사용하여 CSS 토글을 처리하는?

Answer 1

나는 문제가 당신의 상태 변수에, 당신은 하나의 상태 변수를 사용하여 그 변수의 상태에 기초하여 <span>을 인쇄하는 생각합니다. 대신에 showExtraLine = [] 상태의 배열을 사용하면 showExtraLine() 함수에서 이 전달됩니다.이 인덱스를 사용하면 해당 요소 만 토글 할 수 있습니다.

작동해야이 시도 : 나는 그것을 mKing해야한다고 생각하지 않습니다

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