reactjs - 反应如何在输入表单中显示错误消息

Question

我正在使用 react 和 antd。
我正在使用 antd 的 Input 组件。
如果输入超过 10 个字符，我想在输入表单底部显示错误消息。
我想用antd的errorMessage。

代码

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

const App = () => {
  const [value, setValue] = React.useState(null);
  const [onSave, setOnSave] = React.useState(null);
  const handleInputChange = React.useCallback((e) => {
    setValue(Number(e.target.value));
  }, []);

  const onSaveBlur = React.useCallback(() => {
    if (String(value).length < 10) {
      setOnSave(true);
    } else {
      setOnSave(false);
    }
  }, [value]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Input
        type="number"
        value={value}
        onChange={handleInputChange}
        onBlur={onSaveBlur}
      ></Input>
    </div>
  );
};

export default App;

标签： reactjsantd

Answer 1

试试这个：

  import "./styles.css";
import React from "react";
import { Input, Form } from "antd";

const App = () => {
  const [value, setValue] = React.useState(null);
  const [onSave, setOnSave] = React.useState(null);
  const handleInputChange = React.useCallback((e) => {
    setValue(e.target.value);
  }, []);

  const onSaveBlur = React.useCallback(() => {
    if (String(value).length < 10) {
      setOnSave(true);
    } else {
      setOnSave(false);
    }
  }, [value]);
  return (
    <div className="App">
      <Form>
        <Form.Item
          label="Number"
          name="number"
          rules={[
            { required: true, message: "Please input value!" },
            { max: 10, message: "length should be less then 10 letters!" }
          ]}
        >
          <Input
            type="number"
            value={value}
            onChange={handleInputChange}
            onBlur={onSaveBlur}
          ></Input>
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;