React中使用Ant Design Input组件实现输入超10字符展示错误提示

Ant Design 单独的Input组件没有内置错误提示插槽，你需要搭配Form.Item组件调用antd官方自带的错误提示能力，具体调整如下：

• 引入Form组件，使用Form.Item包裹Input组件，通过Form.Item的status属性控制错误态样式，help属性控制底部提示文本
• 修正校验逻辑，把原判断条件改为输入内容长度超过10时触发错误状态
• 优化空值边界处理，避免空输入时null转字符串为"null"导致的长度判断异常
• 调整状态命名为语义化的isLengthError，方便后续维护

完整可运行代码：

import React from "react";
import { Input, Form } from "antd";

const App = () => {
  const [value, setValue] = React.useState(null);
  const [isLengthError, setIsLengthError] = React.useState(false);

  const handleInputChange = React.useCallback((e) => {
    // 输入时可选择清空错误状态，也可修改为输入实时校验
    setIsLengthError(false);
    setValue(e.target.value ? Number(e.target.value) : null);
  }, []);

  const onSaveBlur = React.useCallback(() => {
    if (!value) return; // 空输入不触发校验逻辑
    if (String(value).length > 10) {
      setIsLengthError(true);
    } else {
      setIsLengthError(false);
    }
  }, [value]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Form.Item
        status={isLengthError ? "error" : ""}
        help={isLengthError ? "输入内容不能超过10个字符" : ""}
      >
        <Input
          type="number"
          value={value}
          onChange={handleInputChange}
          onBlur={onSaveBlur}
        />
      </Form.Item>
    </div>
  );
};

export default App;

如果需要输入时实时校验，只需要把长度判断逻辑移到handleInputChange方法里即可，不需要额外修改其他配置。

内容的提问来源于stack exchange，提问作者aahhuhuhu