0
136
ViewsDevolver componente a una identificación al hacer clic en un botón
Quiero devolver un componente <SaveTask/> a una etiqueta div donde <div id="saveTask"> . Intenté usar this.setState() , pero cambia el contenedor y muestra el <SaveTask/> . Quiero mantener ese contenedor y debajo de ese contenedor, quiero agregar un componente después de hacer clic en un botón. ¿Hay alguna forma de agregar un componente usando document.getElementById('saveTask') .
import React, { Component } from 'react' import SaveTask from './SaveTask'; export default class TaskHeader extends Component { constructor(props) { super(props) this.state = { saveTask: false, } this.showComp = () => { this.setState({ saveTask: true, }) } } render() { if(this.state.saveTask) { return ( document.getElementById('saveTask').innerHTML = <SaveTask/> ) } return ( <div> <div className="container-fluid bg-white border-bottom"> <div className="row"> <div className="col-12"> <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div> <div className="tasks-lower"> <span className="text-secondary text-size">TASK</span><button className="text-primary btn-size" type="button" onClick={this.showComp}>+</button> </div> </div> </div> </div> <div id="saveTask"> Return a component to this section when clicking the button </div> </div> ) } } 
2 answers
Answer question0
Sí, entonces la belleza de reaccionar es que no necesita y no debe actualizar el HTML interno para actualizar un componente. Simplemente puede usar un ternario para determinar qué componente mostrar más adelante:
import React, { Component } from 'react' import SaveTask from './SaveTask'; export default class TaskHeader extends Component { constructor(props) { super(props) this.state = { saveTask: false, } this.showComp = () => { this.setState({ saveTask: true, }) } } render() { return ( <div> <div className="container-fluid bg-white border-bottom"> <div className="row"> <div className="col-12"> <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div> <div className="tasks-lower"> <span className="text-secondary text-size">TASK</span><button className="text-primary btn-size" type="button" onClick={this.showComp}>+</button> </div> </div> </div> </div> {this.state.saveTask ? ( <SaveTask/> ) : ( <div id="saveTask"> Return a component to this section when clicking the button </div> )} </div> ) } } En este caso, está diciendo, "si this.state.saveTask es verdadero, entonces muestre <SaveTask /> ; de lo contrario, muestre el elemento <div id="saveTask"> . Si quisiera dentro de ese div, simplemente movería el ternario en su interior.
0
Espero que la siguiente respuesta te ayude.
Lograr usando el Componente Funcional
import React, { useState } from "react"; import SaveTask from "./SaveTask"; function TaskHeader() { const [show, setShow] = useState(false); const showComp = () => { setShow(true); }; return ( <div> <div className="container-fluid bg-white border-bottom"> <div className="row"> <div className="col-12"> <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div> <div className="tasks-lower"> <span className="text-secondary text-size">TASK</span> <button className="text-primary btn-size" type="button" onClick={showComp} > + </button> </div> </div> </div> </div> <div id="saveTask">{show && <SaveTask />}</div> </div> ); } export default TaskHeader;Lograr usando el componente de clase
import React, { Component } from 'react' import SaveTask from './SaveTask'; export default class TaskHeader extends Component { constructor(props) { super(props) this.state = { saveTask: false, } this.showComp = () => { this.setState({ saveTask: true, }) } } render() { return ( <div> <div className="container-fluid bg-white border-bottom"> <div className="row"> <div className="col-12"> <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div> <div className="tasks-lower"> <span className="text-secondary text-size">TASK</span><button className="text-primary btn-size" type="button" onClick={this.showComp}>+</button> </div> </div> </div> </div> <div id="saveTask">` { this.state.saveTask && <SaveTask/> } </div> </div> ) } }