0
137
Vistas¿Por qué todos los div se abrirán si estoy haciendo clic en cualquier botón?
Estoy tratando de obtener los datos para mostrar el contenido como el lado frontal. en esta imagen 
puede ver que mencioné el botón con los atributos div, es decir, en color azul. Probé el código a continuación, pero no sé cómo crear/manejar el botón y div.
import React from "react"; import {Col } from "react-bootstrap"; import "./style.scss" class Example extends React.Component{ constructor(props){ super(props); this.state = { opencollapse: true, } } toggle = () => this.setState((currentState) => ({opencollapse: !currentState.opencollapse})); renderApps = () => { const result = this.props.userdata.appliers.map((item, i) => { return( <div key={i}> <div> <div className="d-flex"> <Col> <button onClick={this.toggle}>{this.state.opencollapse ? 'Click to close' : 'See Letter'}</button> </Col> <Col> helloIcon </Col> </div> {this.state.opencollapse && <div>{this.props.userdata.appliers[i].letter}</div>} </div> </div> ) }); return result; } render(){ return ( <div> {this.renderApps()} </div> ); } } export default Example;No sé dónde hice mal.
En la imagen, como puede ver, traté de hacer clic en el botón número tres para abrir el tercer div, pero los botones número 1 y número 2 también se están abriendo. Quiero abrir esos div que abro yo, otros se cierran. Si hago clic en el botón número uno, entonces el div número uno debería estar abierto y el resto debería estar cerrado al revés.
3 Respuestas
Responde la pregunta0
Es porque tiene la misma variable de estado para todos los botones. Puede crear otro componente. Entonces cada componente mapeado tendrá su propio estado.
Componente hijo:
import React from "react"; import {Col } from "react-bootstrap"; import "./style.scss" class ChildExample extends React.Component{ constructor(props){ super(props); this.state = { opencollapse: true, } } toggle = () => this.setState((currentState) => ({opencollapse: !currentState.opencollapse})); render(){ return ( <div> <div> <div className="d-flex"> <Col> <button onClick={this.toggle}>{this.state.opencollapse ? 'Click to close' : 'See Letter'}</button> </Col> <Col> helloIcon </Col> </div> {this.state.opencollapse && <div>{this.props.text}</div>} </div> </div> ); } } export default ChildExample;función renderApps en el componente de ejemplo:
renderApps = () => { const result = this.props.userdata.appliers.map((item, i) => { return( <ChildExample text={this.props.userdata.appliers[i].letter} ) }); return result; }0
Una buena solución sería crear un componente separado para su botón y ocultar el contenido. De esta manera podemos darle a cada componente su propio estado.
Un ejemplo simplificado se puede encontrar a continuación:
class ToggleElement extends React.Component { constructor(props){ super(props); this.state = { opencollapse: true, }; } toggle = () => { this.setState((currentState) => ( {opencollapse: !currentState.opencollapse} )); } render() { return ( <div> <button onClick={this.toggle}>{this.state.opencollapse ? 'Click to close' : 'See Letter'}</button> {this.state.opencollapse && <div>{this.props.item.letter}</div>} </div> ) } } class Example extends React.Component { constructor(props){ super(props); } renderApps() { return this.props.data.map((item, i) => ( <ToggleElement item={item} /> )); } render() { return ( <div> {this.renderApps()} </div> ); } } // Render it ReactDOM.render( <Example data={[ {letter: 'A'}, {letter: 'B'}, {letter: 'C'}, ]} />, document.body ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>0
Puede intentar hacer que el estado sea una matriz de estados en lugar de uno.
Por ejemplo:
El estado en constructor
constructor(props){ super(props); let initOpenCollapse = []; const n = 5; // This is set based on how many buttons you want to create for (let i = 0; i < n; i++) initOpenCollapse.push(true); this.state = { opencollapse: initOpenCollapse, } }La función de alternar
toggle = (nthButton) => { let resultState = []; for (let i = 0; i < this.state.opencollapse.length; i++) { if (i === nthButton) resultState.push(!this.state.opencollapse[i]); else resultState.push(this.state.opencollapse[i]); } this.setState((currentState) => ({opencollapse: resultState})); };Y en el
render():<button onClick={() => this.toggle(i)}>{this.state.opencollapse[i] ? 'Click to close' : 'See Letter'}</button> ... ... {this.state.opencollapse[i] && <div>{this.props.userdata.appliers[i].letter}</div>}