Manejo dinámico de formularios en reaccionar

2022-12-01 06:25:16

Estoy desarrollando un formulario con elementos html dinámicos. Quiero enviar el formulario, pero el nombre de los elementos html no está predefinido. Todos los campos (los controles HTML se obtienen de una API.

Puedo obtener el nombre de los campos y el valor inicial de los campos usando axios. El número de campos y el nombre de los campos son todos dinámicos. También he hecho la función de controlador de cambios como se muestra a continuación

  onChangeHandler = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

Abajo está la definición del estado

  state = {
    datajson: [],
    fieldname: []
  };

donde datajson contiene todos los datos y valores de campo. fieldname contiene el nombre de los campos.

Quiero enviar el formulario y obtener los datos en un objeto json (a continuación se muestra el objeto json de muestra), que luego se puede enviar usando axios a la base de datos para actualizar el registro.

postSubmit=()=>{
fieldname1:this.state.fieldvalue,
fieldname2:this.state.fieldvalue1
fieldname2:this.state.fieldvalue2
}

He definido todo el código anterior en el componente de clase. ¿Cómo lograr el envío del formulario para el escenario anterior?

- Akash

Source
zh
Responder


1
  • Puede guardar valores de formulario en un objeto en el estado y enviarlo en la publicación del formulario.

    onChangeHandler = event => {
      const { fields } = this.state;
      fields[name] = event.target.value;
      this.setState({
        fields,
      });
    };
    

    El estado se vería así:

    state = {
      datajson: [],
      fieldname: [],
      fields: {},
    };
    

    Y su función de envío:

    postSubmit=()=>{
      // post fields to api.
      const { fields } = this.state;
    }
    

    ¿Estás buscando algo como esto?