No puedo lograr que el decorador de campo de diseño funcione en sí mismo.
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?
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 campofoo
solo se establece eninitialValues
. Para que funcione, el campofoo
debe declararse en el formulario, de esta manera:En este fragmento de código, el campo
foo
se declara dentro del componenteForm.Item
y se puede acceder a él a través del objetoform
. El eventoonClick
actualiza el valor defoo
utilizando la funciónform.setFieldsValue
, a la cual se le pasa el valor actualizado defoo
.Con esta actualización de código, el evento
onClick
actualizará el valor del campofoo
y renderizará el componente con el valor actualizado.