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对象中提供此值，可以更改组件的状态而不会影响这些值。如果有人从最终形式的角度知道这种行为的确切原因，我会很高兴，但是至少现在我有了能够解决此问题的答案。

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

1 个答案: