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

Question

我正在使用 Formik 在 React 应用程序中进行表单验证。父组件 (Users) - 显示用户列表。如果我们 select 任何用户，该用户的详细信息将显示在另一个组件右侧的表单中。子组件 (UserDetails) 显示 selected 用户的详细信息。所有详细信息都显示在子组件的文本框中，我们可以更改和更新详细信息（这里我使用 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

Access the FORMIK form fields values of a child component from it's parent component - React JS

javascript

prompt

reactjs

react-native

formik