0
258
VistasImplementar evento recursivo onClick en reaccionar js
Estoy tratando de implementar un método recursivo en reactjs, pero solo cuando se envían o se hace clic en los datos.
El siguiente es el código con el que estoy intentando:
import React, { Component } from "react"; class Textbox extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) {this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <div> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="React" /> </div> </form> ); } } export default Textbox;que genera la siguiente vista.
Quiero usar un método recursivo onClick o onSubmit, de modo que genere otro cuadro de texto al enviarlo. Me gusta
que quiero continuar hasta que haga clic en algún botón "Salir" o "Detener", que puedo agregar a la parte superior de la vista.
Por lo que he leído sobre la implementación recursiva en ReactJS, necesito volver a llamar a la clase/función dentro del renderizado. Cuando hago eso, creo que reaccionar está entrando en el bucle infinito y congela el navegador.
lo que intenté es llamar a Textbox dentro del <div> <div/> del método de renderizado. Como esto:
.... other code lines are same <div> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="React" /> <Textbox/> </div>¿Cómo puedo generar un cuadro de texto recursivo al enviar/hacer clic en el evento en el cuadro de texto anterior?
1 Respuestas
Responde la pregunta0
Podrías hacerlo así, donde showNextInput evita el bucle infinito:
class Textbox extends React.Component { constructor(props) { super(props); this.state = { value: '', showNextInput: false, }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) {this.setState({value: event.target.value}); } handleSubmit(event) { console.log('submit'); event.preventDefault(); this.setState({ showNextInput: true }); } render() { return ( <> <form onSubmit={this.handleSubmit}> <div> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </div> </form> { this.state.showNextInput ? <Textbox/> : null } </> ); } }Sin embargo, su caso de uso parece algo que normalmente haría al
- administrar una lista de valores en algún lugar,
- agregue elementos según sea necesario dentro de sus controladores, y
- luego mostrar una lista de estos elementos
Aquí un ejemplo rápido y sucio:
export class TextboxList extends React.Component { constructor(props) { super(props); this.state = { values: { 0: '' }, }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(index, value) { this.setState({ values: { ...this.state.values, [index]: value } }); } handleSubmit(event) { event.preventDefault(); this.setState({ values: { ...this.state.values, [Object.keys(this.state.values).length]: '' // add new empty item to list } }); } render() { return ( <> <form onSubmit={this.handleSubmit}> { Object.keys(this.state.values).map( (index) => { const value = this.state.values[index]; return <div key={ index }> <label> Name: <input type="text" value={ value } onChange={ (event) => this.handleChange( index, event.target.value ) } /> </label> <input type="submit" value="Submit" /> </div>; })} </form> </> ); } } export default Textbox;