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.

No puedo lograr que el decorador de campo de diseño funcione en sí mismo.

12 Jul, 2023 Programación

Utilizando ant design 4. Soy nuevo en el framework. Me pregunto por qué el siguiente código no funciona:

return (
    <form initialvalues="{{" foo:="" 1="" }}="" form="{form}" onfinish="{onFinish}">
      <form.item dependencies="{['foo']}">
      {({getFieldValue,setFieldsValue}) => {
          return (
            <button type="button" onclick="{()" ==""> {
                setFieldsValue({ foo: getFieldValue('foo') + 1 });
              }}
            >
              Haz clic {getFieldValue('foo')}
            </button>
          );
      }}
      </form.item>
    </form>
)

Obviamente estoy malentendiendo algo sobre cómo funcionan los formularios de ant design. Mi caso de uso real es muy similar: necesito renderizar un componente que acepte un onClick y actualice el formulario.

¿Qué estoy malentendiendo aquí? ¿Hay alguna manera de hacer que algo así funcione?

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código es que la función setFieldsValue se utiliza para actualizar los valores del formulario, pero se está utilizando en un campo que no está declarado en el formulario. El campo foo solo se establece en initialValues. Para que funcione, el campo foo debe declararse en el formulario, de esta manera:

    <form form="{form}" initialvalues="{{" foo:="" 1="" }}="" onfinish="{onFinish}">
  <form.item name="foo">
    <button type="button" onclick="{()" ==""> {
        form.setFieldsValue({
          foo: form.getFieldValue('foo') + 1,
        });
      }}
    >
      Haz clic {form.getFieldValue('foo')}
    </button>
  </form.item>
</form>

    En este fragmento de código, el campo foo se declara dentro del componente Form.Item y se puede acceder a él a través del objeto form. El evento onClick actualiza el valor de foo utilizando la función form.setFieldsValue, a la cual se le pasa el valor actualizado de foo.

    Con esta actualización de código, el evento onClick actualizará el valor del campo foo y renderizará el componente con el valor actualizado.

Comments are closed.