1

我有一个组件，其中包含一个用 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>
    )
}

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

4

1 回答 1

2

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

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

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

于 2019-08-15T01:20:48.870 回答