reacthooks和antd form.submit校验react-draft-wysiwyg富文本框,输入内容提示立马消失。写一个小demo
时间: 2024-04-08 11:30:33 浏览: 14
当使用React Hooks和Antd的Form组件进行表单校,并且配合React-Draft-Wysig富文本框时,输入内容提示立即消失的问题可以通过以下方式解决:
首先,确已经安装了相关的依赖包:
`
npm install antd react-draft-wysiwy draft-js
```
然后,创建一个新的组件,命名为DemoForm:
```
import React, { useState } from '';
import { Form, Input, Button } fromantd';
import { EditorState, ContentState from 'draft-js';
import { } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
const DemoForm = () => {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const [form] = Form.useForm();
const handleFormSubmit = (values) => {
console.log(values);
};
const handleEditorChange = (state) => {
setEditorState(state);
};
return (
<Form form={form} onFinish={handleFormSubmit}>
<Form.Item
name="content"
rules={[
{
required: true,
message: '请输入内容',
},
]}
>
<Editor
editorState={editorState}
onEditorStateChange={handleEditorChange}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
);
};
export default DemoForm;
```
在上面的代码中,我们使用useState钩子来管理富文本框的编辑状态(editorState)和Form组件的表单状态(form)。onEditorStateChange函数用于更新编辑状态,handleFormSubmit函数用于处理表单提交。
在Form.Item组件中,我们使用了rules属性来进行表单校验。在这个例子中,我们要求content字段是必填的,如果没有输入内容,会显示"请输入内容"的错误提示。
最后,通过使用Editor组件来展示富文本框,并且将editorState和handleEditorChange函数传递给它。
这样,在输入内容时,如果没有满足校验规则,会显示错误提示,直到满足规则或者手动清空输入内容。