React 如何在输入表单中显示 ErrorMessage

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;

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;

Answer 2

您应该添加一个错误状态并按照以下条件显示它：

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

const App = () => {
  const [value, setValue] = React.useState(null);
  const [onSave, setOnSave] = React.useState(null);
  const [error, setError] = 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 {
      setError(isLowerCase ? null : 'error message')
      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 role="alert" style={{color: 'red'}}>
        {error}
      </div>
    </div>
  );
};

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

您可以在 Form.Item 内添加默认 AntD 规则，如下所示

<Form.Item
   rules = {[{  max:10, message: "length should be less then 10 
   letters!"}]}
>
   <Input placeholder="Username"/>
 </Form.Item>

React 如何在输入表单中显示 ErrorMessage

React how to display ErrorMessage in Input Form

reactjs

antd