0

我正在尝试使用react-draft-wysiwyg来编辑从服务器获取的数据。问题是我将编辑器放在渲染道具中，所以我不能更改editorState，因为这会导致无限循环。我将编辑器配置为不受控制，只从表单中获取数据。

据我了解，stateToHTML不适合这里，因为它需要状态，但这里我们有一个对象。你能告诉我，还有其他功能可以在发送前转换编辑器数据吗？还是选择其他编辑器而不是draft-js更好？

表单提交处理程序位于and-design表单的onFinish内。这是组件列表：

import React, { Component, Fragment } from 'react';
import Line from '../components/Line';
import { Button, Form, Input } from 'antd';
import { SaveOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import { Get } from 'react-axios';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { stateFromHTML } from 'draft-js-import-html';

class Info extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Fragment>
        {this.props.lang.lang && (
          <Get url={`${process.env.REACT_APP_API_PORT}api/info/${this.props.lang.lang.info}`}>
            {(error, res, isLoading) => {
              if (error) {
                return (<div>Something bad happened: {error.message} </div>)
              }
              else if (isLoading) {
                return (<div>Loading...</div>)
              }
              else if (res !== null) {
                const { data } = res;
                return (
                  <Fragment>
                    <h1>{data.title}</h1>
                    <Line />
                    <Form
                      layout="vertical"
                      initialValues={{
                        ...data
                      }}
                      onFinish={values => {
                        console.log({
                          ...values,
                          body: values.body,
                        });
                      }}
                    >
                      <Form.Item
                        name="title"
                        label="Title"
                        rules={[{ required: true, message: 'Please enter post title' }]}
                      >
                        <Input placeholder="Please enter post title" />
                      </Form.Item>
                      <Form.Item
                        name="body"
                        label="Text"
                      >
                        <Editor
                          defaultEditorState={EditorState.createWithContent(stateFromHTML(data.body))}
                          wrapperClassName="demo-wrapper"
                          editorClassName="demo-editor"
                        />
                      </Form.Item>
                      <Button
                        type="primary"
                        htmlType="submit"
                        className='save'
                      >
                        <SaveOutlined />
                        <span>Сохранить</span>
                      </Button>
                    </Form>
                  </Fragment>
                );
              }
              return (<div>Default message before request is made.</div>)
            }}
          </Get>
        )}
      </Fragment>
    );
  }
}

const mapStateToProps = state => {
  return {
    lang: state.lang
  }
}

export default connect(mapStateToProps, null)(Info);

问候。

4

1 回答 1

0

解决了。有一个 draftjs-to-html 包，可以将对象从不受控制的编辑器表单解析为 html。

import draftToHtml from 'draftjs-to-html';

...

body: draftToHtml(values.body)
于 2020-05-21T19:03:03.420 回答