formik 警告，组件正在更改要控制的文本类型的不受控制的输入

JS

formik是一个流行的React库，用于处理表单的状态管理和验证。它提供了一种简洁和强大的方式来处理表单输入，并且可以帮助我们避免常见的错误和警告。

最近，我在使用formik时遇到了一个警告，警告内容是"组件正在更改要控制的文本类型的不受控制的输入"。这个警告的意思是，我正在尝试更改一个由formik控制的输入字段，但是该字段没有被formik管理。

案例代码：

JSx
import React from 'react';
import { useFormik } from 'formik';
const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      username: '',
      password: '',
    },
    onSubmit: (values) => {
      console.log(values);
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="username">用户名</label>
      <input</p>        type="text"
        id="username"
        name="username"
        onChange={formik.handleChange}
        value={formik.values.username}
      />
      <label htmlFor="password">密码</label>
      <input</p>        type="password"
        id="password"
        name="password"
        onChange={formik.handleChange}
        value={formik.values.password}
      />
      <button type="submit">提交</button>
    </form>
  );
};
export default MyForm;

在上面的代码中，我创建了一个简单的登录表单。使用formik的useFormik钩子函数，我定义了表单的初始值和提交处理函数。然后，在表单的每个输入字段中，我使用formik提供的handleChange和values属性来管理输入的状态。

然而，在运行代码时，我注意到控制台上出现了一个警告，告诉我我正在更改一个由formik控制的输入字段。这是一个很常见的错误，可能导致表单的状态不一致或不可预测的行为。

如何解决这个警告？

要解决这个警告，我们需要确保所有的输入字段都由formik管理。这可以通过将formik的handleChange和values属性分别绑定到每个输入字段的onChange和value属性来实现。

接下来，让我们来看看如何修改代码来解决这个警告。

JSx
import React from 'react';
import { useFormik } from 'formik';
const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      username: '',
      password: '',
    },
    onSubmit: (values) => {
      console.log(values);
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="username">用户名</label>
      <input</p>        type="text"
        id="username"
        name="username"
        onChange={formik.handleChange}
        value={formik.values.username}
      />
      <label htmlFor="password">密码</label>
      <input</p>        type="password"
        id="password"
        name="password"
        onChange={formik.handleChange}
        value={formik.values.password}
      />
      <button type="submit">提交</button>
    </form>
  );
};
export default MyForm;

现在，我们已经将所有的输入字段绑定到formik的handleChange和values属性上，警告已经消失了。我们可以放心地使用formik来管理表单的状态和验证。

formik是一个非常有用的React库，可以帮助我们简化表单的状态管理和验证。但是，在使用formik时，我们需要小心不要更改不受formik管理的输入字段，否则会出现警告。通过将所有的输入字段绑定到formik的handleChange和values属性上，我们可以避免这个警告，并确保表单的状态一致和可预测。

希望本文能帮助你更好地理解formik警告和如何解决它们。祝你在使用formik时顺利！