Formik无线电值在回调中不是最新的

Question

我使用formik构建具有两个单选按钮的表单：

    Settings::setPdfRendererName(Settings::PDF_RENDERER_DOMPDF);
    Settings::setPdfRendererPath('../../dompdf-master/vendor/');

    $phpWord = IOFactory::load($existingfile, 'Word2007');
    $phpWord->save('../../test.pdf', 'PDF');

我的目标是在选择广播元素时得到通知。因此，我将onSelect回调传递给RadioButton组件，并将其添加到输入字段const RadioButton = ({ field: { name, value, onChange, onBlur }, id, label, className, onSelect, ...props }) => { return ( <div> <input name={name} id={id} type="radio" value={id} checked={id === value} onChange={onChange} onClick={onSelect} onBlur={onBlur} {...props} /> <label htmlFor={id}>{label}</label> </div> ); }; const App = () => ( <div className="app"> <Formik initialValues={{ radioGroup: "" }} render={({ values }) => ( <form> <Field component={RadioButton} name="radioGroup" id="radioOption1" onSelect={() => console.log(values)} label="Option 1" /> <Field component={RadioButton} name="radioGroup" id="radioOption2" onSelect={() => console.log(values)} label="Option 2" /> <p>{JSON.stringify(values)}</p> </form> )} /> </div> ); 的onClick处理程序中。

该通知有效。但是在

onClick={onSelect}

值不包含选定的单选。

onSelect={() => console.log(values)}

显示所选的值，如您在此处看到的

亲自尝试：

https://codesandbox.io/s/formik-radio-and-checkbox-inputs-vguym

知道为什么会这样吗？

Answer 1

您正在使用onSelect，该操作会在您单击元素（重新渲染之前）后立即发生。它显示了当时values对象的状态initialValues。 一旦它重新呈现表单（因为由于事件（即单选按钮radioGroup的状态选择）值的改变而使formik prop更改），它将强制重新呈现，因此您会在屏幕输出中看到正确的值。如果您在表单标签下的console.log外面加上它，它将在重新渲染时显示更新状态

此处更新了代码段，以反映点击事件发生时和发生后的情况

https://codesandbox.io/s/formik-radio-and-checkbox-inputs-mgps7

它还显示了我在各种情况下的代码库中主要使用的用法信息。