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

o2gm4chl 于 2023-06-22 发布在 React

关注(0)|答案(3)|浏览(126)

我正在尝试在React中使用Formik作为一个虚拟应用程序。如果我给予值作为 prop ，我就不能在两个输入框中输入任何东西。另一方面，如果我跳过值属性，那么我可以在框中输入，但在提交时不会反映为值。
代码如下：

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

}
我可能是非常错误的，可能是忽略了一个小错误，但任何帮助/建议是赞赏！

reactjs

来源：https://stackoverflow.com/questions/58013702/why-is-onchange-not-working-when-used-in-formik

3条答案

按热度按时间

z4bn682m1#

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

嗨，朋友，你能试试这个吗？

赞(0）回复(0）举报 2023-06-22

9njqaruj2#

我的也不工作，我给id prop 在我的TextField，现在它工作

const formik = useFormik({
    initialValues: {
      username: "",
      password: "",
    },

    onSubmit: (values) => {
      console.log(values);
      // onLogin(values.username, values.password);
    },
  });

<form onSubmit={formik.handleSubmit}>
          <TextField
            value={formik.values.username}
            onChange={formik.handleChange}
            id="username"
            name="username"
            variant="outlined"
            style={TextField1style}
            placeholder="Enter username"
            fullWidth
            required
            //.
            // .
           // .
            // other code

enter image description here

赞(0）回复(0）举报 2023-06-22

xnifntxz3#

这种奇怪行为的另一种可能性是将组件放在函数中，并将props作为函数参数发送，而不是使用具有props作为参数的函数组件。
当一个组件在一个函数中时，你会失去react组件的生命周期，即使参数的值发生了变化，参数也不会刷新。
确保表单元素被正确配置为react元素。

赞(0）回复(0）举报 2023-06-22