es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La función form.resetFields() de React Ant Design no llama al evento onChange de los .

17 Jun, 2023 Programación

Estoy utilizando un componente Ant Design <Form> con <Form.Items> que tienen eventos onChange. Si la función del evento onChange es verdadera, muestro contenido adicional.
Entonces, en el ejemplo de sandbox que creé, al cambiar todos los <Radio> a Sí, se dispara el evento onChange que se valida y luego se muestra una div con el texto “Ha marcado todas las respuestas con sí”.
Como estoy utilizando <Form> es un entorno controlado por formularios, así que estoy usando form para establecer y restablecer los valores. Pero al llamar a form.resetFields(), los manejadores onChange no se llaman. Entonces, el mensaje no desaparecerá ya que el estado no se actualiza. Por lo tanto, tengo que encontrar una manera de llamar a una función desde el componente padre que actualice los valores del formulario en el componente hijo.
Usar useImperativeHandle() para cada campo para actualizar en formularios más complejos y llamar funciones desde el padre parece demasiado complejo para una tarea tan simple. Y agregar eventos personalizados para comunicarse con los componentes principales parece no ser una forma muy reactiva al leer este hilo de Overflow de Stack
¿Hay algo del formulario Ant Design que me esté perdiendo? Porque esto debe ser una tarea común. ¿Cuál es una buena manera de abordar este problema?

Enlace al código sandbox con un ejemplo:

Ejemplo:
// el mismo código de ejemplo proporcionado en inglés

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para actualizar el componente hijo al llamar form.resetFields() en Ant Design Form

    En el ejemplo de código sandbox proporcionado, el componente AntDFormChild tiene eventos onChange que se actualizan cuando el usuario selecciona una opción del componente Radio.Group. Mientras se usa form.resetFields(), los eventos onChange no se llaman y, por lo tanto, el estado no se actualiza como se esperaba.

    Una posible solución que se puede implementar sin usar useImperativeHandle() para comunicarse con el componente principal es agregar una propiedad key al componente AntDFormChild. El valor de la propiedad key se puede actualizar cada vez que se llaman las funciones handleResetForm() o handleFillForm(). Esto creará esencialmente una nueva instancia del componente AntDFormChild y reestablecerá su estado como se esperaba.

    Aquí está el código actualizado con los cambios:

    const AntDForm = () => {
  const [form] = Form.useForm();
  const [, setIsKeyUpdate] = useState(false);

  const handleResetForm = () => {
    form.resetFields();
    // actualizar la propiedad key para forzar el renderizado y reiniciar el estado del componente AntDFormChild
    setIsKeyUpdate((prev) => !prev);
  };

  const handleFillForm = () => {
    form.setFieldsValue({ rjr01_q01: 1, rjr02_q01: 1 });
    // actualizar la propiedad key para forzar el renderizado y reiniciar el estado del componente AntDFormChild
    setIsKeyUpdate((prev) => !prev);
  };

  return (
    <>
      <button onclick="{handleResetForm}">Restablecer Formulario</button>
      <button onclick="{handleFillForm}">Rellernar Formulario</button>
      <form {...formlayout}="" form="{form}" initialvalues="{{" ...questiondefaultvalues="" }}="">
        {/* Agregar la propiedad key con form.getFieldsValue() para forzar el renderizado y reiniciar el estado */}
        <antdformchild key="{JSON.stringify(form.getFieldsValue())}" form="{form}"></antdformchild>
      </form>

  );
};

    En esta solución, agregamos una variable de estado isKeyUpdate que se cambia cada vez que se llaman las funciones handleResetForm() o handleFillForm() para actualizar la propiedad key del componente AntDFormChild. La propiedad key se establece en el valor actual de form.getFieldsValue(), que es un objeto JSON de todos los valores de campo del formulario. Esto obligará a que se vuelva a renderizar el componente AntDFormChild con una nueva instancia y reinicie su estado.

    Esta es una forma simple y eficiente de actualizar el estado del componente hijo al restablecer el formulario en un entorno controlado usando el componente de Ant Design Form.

Comments are closed.