Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

请问 React 使用 AntD v4 的 Form 表单怎样设置富文本编辑器数据域的值

文本编辑器用的是 wangEditor
按照官方文档的说明, ref 获取数据域, 然后通过 setFieldsValue 设置表单的值
大佬们, 求教! ??
报错信息:

this.editorRef.current.setFieldsValue is not a function
import React, { Component, createRef } from "react";
import { Card, Button, Form, Input, DatePicker } from "antd";
import { FileOutlined, GithubOutlined, EyeOutlined } from "@ant-design/icons";
import E from "wangeditor";
import "./edit.less";
// console.log(E);

export default class ArticleEdit extends Component {
  constructor() {
    super();
    this.editorRef = createRef();
  }

  //? wangeditor
  initEditor = () => {
    this.editor = new E(this.editorRef.current);
    this.editor.customConfig.onchange = (html) => {
      console.log(html);
      //? html 即变化之后的内容
      this.editorRef.current.setFieldsValue({ content: html });
    };
    this.editor.create();
  };

  componentDidMount() {
    this.initEditor();
  }
  render() {
    const onFinish = (values) => {
      console.log("Received values of form: ", values);
    };

    //? layout
    const layout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
    };
    return (
      <Card title="编辑文章" extra={<Button>取消编辑</Button>}>
        <Form
          name="normal_article"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          {...layout}
        >
          <Form.Item
            name="content"
            label="内容区域"
            rules={[{ required: true, message: "内容不可为空" }]}
          >
            <div className="wangeditor-index" ref={this.editorRef}></div>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 2 }}>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              保存修改
            </Button>
          </Form.Item>
        </Form>
      </Card>
    );
  }
}

image


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

现已解决, 给 Form 组件再加个 Ref 就好了。
setFieldsValue 需用在组件上添加的 Ref, DOM 的 Ref 使用必然报错..
不好意思大家,这个问题很羞愧,我是初学者 很多东西看得不仔细。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...