在 React 子组件中使用 formik

Question

我将 formik 用于一个简单的表单，但我有几个从远程数据源填充的多选输入，因此我将它们制作成子组件。基本形式类似于

<div className="form-group">
    <label htmlFor="priority">Priority</label>
    <select
        id="priority"
        onChange={formik.handleChange}
        className="form-control"
        value={formik.values.priority}
        defaultValue="Normal"
        disabled={isDisabled}
    >
        <option>Urgent</option>
        <option>High</option>
        <option>Normal</option>
        <option>Low</option>
    </select>
</div>
<div className="form-group">
    <label htmlFor="myselect">MySelect List</label>
    <MySelect />
</div>

我可以将 formik 作为 prop 传递给子组件，还是将 OnChange 方法和 value 作为 props 传递，或者是否有不同的处理方式这在主窗体对象中？

Answer 1

解决方案似乎只是将 formik.value 和 formik.handleChange 作为 props 传递给子组件，然后照常使用它们。请注意，子组件中输入的 id（在本例中为 select）必须与 formik.values.name 相同，否则 handleChange 将不起作用。

在 React 子组件中使用 formik

using formik in react subcomponent

forms

reactjs

formik