Reaccionar: agregue dinámicamente campos de entrada al formulario

Encontramos el arreglo a este apuro, o por lo menos eso esperamos. Si presentas preguntas dínoslo y sin pensarlo

Solución:

Sí, podemos actualizar los datos subyacentes de nuestro componente (es decir, state o props). Una de las razones por las que React es tan bueno es que nos permite centrarnos en nuestros datos en lugar del DOM.

Supongamos que tenemos una lista de entradas (almacenadas como un array de cuerdas en state) para mostrar, y cuando se hace clic en un botón, agregamos un nuevo elemento de entrada a esta lista:

class MultipleChoice extends Component 
    constructor(props) 
        super(props);
        this.state =  inputs: ['input-0'] ;
    

    render() 
        return(
            

               

                   

                       this.state.inputs.map(input => )
                   
               
                this.appendInput() >
                   CLICK ME TO ADD AN INPUT
               
            
        );
    

    appendInput() 
        var newInput = `input-$this.state.inputs.length`;
        this.setState(prevState => ( inputs: prevState.inputs.concat([newInput]) ));
    

Obviamente, este ejemplo no es muy útil, pero espero que le muestre cómo lograr lo que necesita.

No usé Formsy-React pero resolví el mismo problema, publicando aquí en caso de que ayude a alguien que intente hacer lo mismo sin Formsy.

class ListOfQuestions extends Component 
  state = 
    questions: ['hello']
  

  handleText = i => e => 
    let questions = [...this.state.questions]
    questions[i] = e.target.value
    this.setState(
      questions
    )
  

  handleDelete = i => e => 
    e.preventDefault()
    let questions = [
      ...this.state.questions.slice(0, i),
      ...this.state.questions.slice(i + 1)
    ]
    this.setState(
      questions
    )
  

  addQuestion = e => 
    e.preventDefault()
    let questions = this.state.questions.concat([''])
    this.setState(
      questions
    )
  

  render() 
    return (
      
        this.state.questions.map((question, index) => (
          
            
            X
          
        ))
        Add New Question
      
    )
  

Reseñas y valoraciones del tutorial

Tienes la posibilidad recomendar esta sección si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador