React+Ant Design表单问题：输入其他字段时验证码自动切换

我来帮你搞定这个验证码自动变更的问题！这种情况大概率是因为你的<Captcha />组件在表单其他字段更新时被意外重新渲染了，导致每次渲染都生成了新的验证码。下面是具体的分析和解决方案：

问题根源 #

当你在其他表单输入框输入内容时，表单的状态会更新，这会触发整个表单组件（包括包含验证码的FormItem）重新渲染。如果你的<Captcha />组件没有做任何缓存或状态控制，每次渲染都会重新生成验证码，自然就会出现你遇到的“输入其他字段时验证码自动变”的问题。

可行解决方案 #

这里有几种实用的处理方式，你可以根据自己的代码结构选择：

1. 让Captcha组件内部缓存验证码，仅主动刷新时更新 #

修改你的Captcha组件，把验证码的状态存在组件内部，只在初始化或者用户主动点击刷新时生成新验证码，而不是每次渲染都生成：

import { useState } from 'react';
import { Button } from 'antd';

const Captcha = () => {
  // 初始化生成验证码
  const [captcha, setCaptcha] = useState(generateCaptcha());

  // 手动刷新验证码的函数
  const refreshCaptcha = () => {
    setCaptcha(generateCaptcha());
  };

  return (
    <Button onClick={refreshCaptcha} type="text">
      {captcha}
    </Button>
  );
};

// 示例：生成随机验证码的工具函数
const generateCaptcha = () => {
  return Math.random().toString(36).slice(2, 6).toUpperCase();
};

这样一来，只有用户点击刷新按钮时，验证码才会变化，组件即使因为表单其他字段更新而重新渲染，也不会改变已生成的验证码。

2. 用React.memo优化Captcha组件的重渲染 #

如果你的Captcha组件不需要依赖外部传入的状态或props，可以用React.memo包裹它，让它只有在props发生变化时才重新渲染：

import { memo } from 'react';

// 用memo包裹，避免不必要的重渲染
const Captcha = memo(() => {
  // 这里注意：如果还是每次渲染都调用generateCaptcha，那memo也没用
  // 所以最好结合上面的内部状态方式一起用
  const [captcha, setCaptcha] = useState(generateCaptcha());
  const refreshCaptcha = () => setCaptcha(generateCaptcha());

  return <Button onClick={refreshCaptcha} type="text">{captcha}</Button>;
});

3. 把验证码状态提升到父组件，手动控制更新时机 #

如果需要在特定场景（比如表单提交成功后）刷新验证码，可以把验证码的状态放在父组件中，通过props传递给Captcha组件：

// 表单父组件
import { useState } from 'react';
import { Form, FormItem, Input, Icon } from 'antd';

const MyForm = () => {
  const [captcha, setCaptcha] = useState(generateCaptcha());

  // 父组件控制的刷新函数
  const refreshCaptcha = () => {
    setCaptcha(generateCaptcha());
  };

  return (
    <Form>
      <FormItem>
        <Input
          prefix={<Icon type="key" style={{ color: "rgba(0,0,0,.25)" }} />}
          type="text" {/* 注意：Antd Input没有captcha类型，改成text即可 */}
          placeholder="captcha"
          addonAfter={<Captcha captcha={captcha} refresh={refreshCaptcha} />}
        />
      </FormItem>
      {/* 其他表单字段 */}
      <FormItem>
        <Input placeholder="用户名" />
      </FormItem>
    </Form>
  );
};

// Captcha子组件
const Captcha = ({ captcha, refresh }) => {
  return <Button onClick={refresh} type="text">{captcha}</Button>;
};

const generateCaptcha = () => {
  return Math.random().toString(36).slice(2, 6).toUpperCase();
};

这种方式下，验证码的更新完全由你手动触发，其他字段输入时绝对不会自动变更。

小提示 #

另外，你代码里的Input用了type="captcha"，Ant Design的Input组件其实没有这个类型哦，改成type="text"就可以正常使用了，不影响功能~

内容的提问来源于stack exchange，提问作者Mark Gerryl Mirandilla