Question

我正在使用 Formik 在React应用程序中进行表单验证。父级组件（用户）-显示用户列表。如果我们选择任何用户，则该用户的详细信息将以表格的形式显示在右侧的另一个组件中。子组件（ UserDetails ）显示所选用户的详细信息。所有详细信息都显示在子组件的文本框中，我们可以更改和更新详细信息（在这里，我在更新之前使用FORMIK来验证字段）。

我有一个场景，当有人修改表单中的详细信息并单击另一个用户而不更新以前的编辑时。在这种情况下，我想显示一个提示，指出“未保存的更改将丢失”

Answer 1

看起来<Formik/>上没有一个道具可以收到更改通知。通过查看API，您可以在Users上存储一个标志，该标志可在与当前呈现的表单进行的任何更改之间切换：

// Users

function Users() {
    const [edited, setEdited] = useState(false);
    const [active, setActive] = useState();
    return (
        <>
            <UsersList onSelect={(user) => {
                if (edited) {
                    // Notify user of unsaved changes
                } else {
                    setEdited(false);
                    setActive(user);
                }
            }}/>
            <UserDetails user={active} onEdit={() => setEdited(true)}/>
        </>
    )
}

// UserDetails

function UserDetails({ onEdit }) {
    return (
        <Formik>
            {props => (
                <input onChange={(evt) => {
                    onEdit(); // Notify parent component of an edit
                    props.handleChange(evt);
                }}/>
            )}
        </Formik>
    )
}

从父组件访问子组件的FORMIK表单字段值-React JS

1 个答案: