为什么 OnChange 在 Formik 中使用时不起作用？

Question

我正在尝试将 React 中的 Formik 用于虚拟应用程序。如果我提供价值作为道具，我将无法在任何一个输入框中输入任何内容。另一方面，如果我跳过价值道具，那么我可以在框中输入，但提交时不会反映为价值。

代码如下：

export default class DashboardPage extends React.Component {
    render() {
        return (
                    <Formik
                        initialValues={{ fname: "", lname: "" }}
                        onSubmit={(values) => {
                            alert(values.fname);
                        }}
                        render={({ values, handleChange, handleSubmit }) => (
                            <form onSubmit={handleSubmit}>
                               <input type="text" placeholder="First Name" name="fname" onChange={handleChange} value={values.fname} />
                               <input type="text" placeholder="Last Name" name="lname" onChange={handleChange} value={values.lname} />
                               <button type="submit>ADD<button/>
                            </form>
                        )}
                    />
        );
    }

}

我这里可能有很大的错误，可能忽略了一个小错误，但是任何 help/suggestion 不胜感激！

Answer 1

export default class DashboardPage extends React.Component {
    render() {
        return (
                    <Formik
                        initialValues={{ fname: "", lname: "" }}
                        onSubmit={ (values) => alert(values.fname) }
                     >
                    { props => (
                      <React.Fragment>                     
                        <form onSubmit={handleSubmit}>
                            <input type="text" placeholder="First Name" name="fname" onChangeText={props.handleChange('fname')} />
                               <input type="text" placeholder="Last Name" name="lname" onChangeText={props.handleChange('lname')} />
                               <button type="submit>ADD<button/>
                            </form>
                        </React.Fragment>
                    )}
                 </Formik>
        )
    }
}

嗨，伙计，你能试试这个吗？

Answer 2

这种奇怪行为的另一种可能性是将您的组件放在一个函数中并将 props 作为函数参数发送，而不是使用带有 props 作为参数的功能组件。

当一个组件在一个函数中时，你失去了 React 组件的生命周期，即使它的值发生变化，参数也不会刷新。

确保您的表单元素已正确配置为反应元素。

为什么 OnChange 在 Formik 中使用时不起作用？

Why is OnChange not working when used in Formik?

html

reactjs

formik