如何在不重置最终形式值的情况下更改组件状态?

Question

我有一个组件，其中包含一个由 react-final-form 制成的表单;所有输入字段都像我所有其他表单一样工作正常，但是，我有一个自定义输入，我需要更改组件的状态，然后在 handleSubmit 中，我会将该值添加到表单数据中。这基本上是一个自定义输入。

但是，当我更新组件的状态时，每当状态更新时，它都会重置其他输入字段中的任何用户输入。为什么要这样做，或者我在这里缺少什么，以便更改组件状态不会重置其他输入中的值？我知道我以前见过它的工作，但我无法分辨出其中的区别。

这是我的表格的简化版本

const MyForm = () => {
const [period,setPeriod] = useState(new Date())
const handleSubmit = (data) => {
console.log(data)
}
const handleSelectPeriod = (month) =>{
setPeriod(month)
}
const initialValues = {
period,
package_id:context.inheritData.package_id,
balance:0.00
}
return (
<div>
<Form
onSubmit={handleSubmit}
validate={values => validate(values, schema())}
initialValues={initialValues}
>
{({handleSubmit})=>(
<div>
<form onSubmit={handleSubmit}>
<div className={'form-group'}>
<label htmlFor="name">Name/label>
<InputField name={'name'} />
</div>
<div className={'form-group'}>
<label htmlFor="slug">Slug</label>
<InputField name={'slug'} />
</div>
<div className={'form-group'}>
<MonthYearContainer selectMonth={handleSelectPeriod}/>
</div>
<div className={'form-group'}>
<label htmlFor="balance">Balance Inicial</label>
<InputField name='balance' type={'number'} step={0.01}/>
</div>
<FormButton isLoading={loading} text={'Crear'} textLoading={'Creando Condominio'}/>
</form>
</div>
)}
</Form>
</div>
)
}

预期的行为是让用户更改组件状态，而无需重置他们在其他字段中已输入的任何内容。

Answer 1

好的，所以我终于找到了导致此错误的原因，以防其他人发现自己处于这种情况。

我不确定它以这种方式运行的确切技术原因，但本质上，错误是我试图通过状态控制并在提交之前手动添加到表单数据的字段也在提供给表单的 initialValues 对象中提供。

通过在intialValue中不提供此值，objecti 可以更改组件的状态，而不会影响值。如果有人从最终形式的角度知道这种行为的确切原因，我会很高兴，但至少现在我有能够解决这个问题的答案。

Answer 2

在 react final form 中使用keepDirtyOnReinitialize。

https://final-form.org/docs/final-form/types/Config