为什么在Formik中使用OnChange时不起作用? [英] Why is OnChange not working when used in Formik?

问题描述

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

I am trying to use Formik in React for a dummy app. I am not being able to type anything in either of the input boxes if I give value as a prop. On the other hand, if I skip the value props, then I can type in the boxes but the same is not reflected as the value while submitting.

这是代码:

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>
                        )}
                    />
        );
    }

}

我在这里可能是非常错误的，并且可能忽略了一个小错误，但是可以提供任何帮助/建议！

I may be very wrong here and might be over-looking a minor error, but any help/suggestion is appreciated!

推荐答案

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>
        )
    }
}

你好，你能试试吗?

这篇关于为什么在Formik中使用OnChange时不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！