reacthooks和antd form.submit校验自定义富文本框，输入内容提示立马消失

对于React Hooks和Ant Design的Form组件，如果你想要在自定义的富文本框中进行输入内容的实时校验，并且在用户输入内容后立即提示消失，可以尝试以下步骤：

1. 首先，确保你的自定义富文本框组件是一个受控组件，即它的值由父组件通过props传递，并且通过onChange事件进行更新。

2. 在父组件中，使用React Hooks的useState来管理输入内容的状态。例如，你可以创建一个名为"content"的状态变量和一个名为"setContent"的状态更新函数。

3. 在自定义富文本框组件中，将输入框的值设置为从父组件传递的"content"变量，并在onChange事件中调用父组件传递的"setContent"函数更新输入内容。

4. 在Ant Design的Form组件中，可以使用getFieldDecorator方法来包装自定义富文本框，并提供校验规则和提示信息。例如，你可以使用rules属性指定校验规则，并使用message属性指定提示信息。

5. 如果你希望在用户输入内容后立即显示提示信息，并且在用户继续输入时立即消失，可以使用validateTrigger属性设置校验触发的时机。例如，你可以将validateTrigger属性设置为"onChange"，这样在用户输入时即可触发校验并显示提示信息。

下面是一个示例代码片段，演示了如何实现上述功能：

import React, { useState } from 'react';
import { Form, Input } from 'antd';

const CustomRichTextBox = ({ content, setContent }) => {
  const [isTouched, setIsTouched] = useState(false);

  const handleInputChange = (e) => {
    setIsTouched(true);
    setContent(e.target.value);
  };

  return (
    <Form.Item
      label="Content"
      validateStatus={isTouched && !content ? 'error' : ''}
      help={isTouched && !content ? 'Content is required' : ''}
    >
      <Input value={content} onChange={handleInputChange} />
    </Form.Item>
  );
};

const MyForm = () => {
  const [content, setContent] = useState('');

  const handleSubmit = () => {
    // 提交表单逻辑
  };

  return (
    <Form onSubmit={handleSubmit}>
      <CustomRichTextBox content={content} setContent={setContent} />

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

在上述代码中，我们使用了useState来管理输入内容的状态，使用isTouched状态变量来标记是否已经进行过输入操作。在CustomRichTextBox组件中，根据isTouched和content的值来设置校验状态和提示信息。在MyForm组件中，将content状态变量和setContent状态更新函数传递给CustomRichTextBox组件，并在提交表单时使用handleSubmit函数处理逻辑。

希望以上信息能够对你有所帮助！如果还有其他问题，请随时提问。