0

我正面临试图采用 Draft.js 文本编辑器在博客网站中添加/编辑帖子的问题。我在我的数据库中使用增量 ID、标题和描述。 -我的数据库是什么样子的-

以前，我使用 React Forms，我的数据库是使用 MySQL 完成的。现在我可以使用我之前的代码提交和编辑主题和描述（我的数据库的键）。

我需要帮助：

  1. 正确使用 convertToRaw 保存在我的数据库中
  2. 了解 EditorState 的工作原理

如果有帮助，我可以发布我以前的代码！谢谢你的时间 ：）

该代码是我尝试从 Forms include Draft.js 更改：

PostEdit.js

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Button, Container, Form, FormGroup, Input, Label } from 'reactstrap';
import AppNavbar from './../AppNavbar';

import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

import { convertToRaw } from 'draft-js';

export const createPost = (post, pid) => {
    let postWithPid = { ...post, id: pid };
    const { item } = this.state;
    return fetch('/api/post', {
        method: (item.id) ? 'PUT' : 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(postWithPid)
    })
    .then(response => response.json())
}

class PostEdit extends Component {

    emptyPost = {
        topic: '',
        description: '',
        editorState: EditorState.createEmpty()
    };

    constructor(props) {
        super(props);
        this.state = {
            item: this.emptyPost
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    async componentDidMount() {
        if (this.props.match.params.id !== 'new') {
            const post = await (await fetch(`/api/post/${this.props.match.params.id}`)).json();
            this.setState({ item: post });
        }
    }

    async handleSubmit(event) {
        event.preventDefault();
        var convertedData = convertToRaw(this.state.editorState.getCurrentContent())
        const { item } = this.state;

        this.props.createPost(
            {
                content: convertedData,
                id: this.props.id,
            },
            this.props.id
        )
        this.setState({ editorState: EditorState.createEmpty() })
    }

    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value })
    }

    onChange = (editorState) => this.setState({ editorState });
    

    render() {

        return <div>
            <AppNavbar />
            <Container>
                <Editor
                    editorState={this.state.editorState}
                    wrapperClassName="demo-wrapper"
                    editorClassName="editer-content"
                    onEditorStateChange={this.onChange}
                    toolbar={{
                        options: ['inline', 'list', 'colorPicker', 'link', 'emoji', 'image'],
                        inline: { inDropdown: true },
                        list: { inDropdown: true },
                        link: { inDropdown: true },
                        history: { inDropdown: true },
                    }}
                />
                <Button onClick={this.handleSubmit} id="comment-submit-button" color="teal">Submit</Button>
 
            </Container>
        </div>
    }
}

export default withRouter(PostEdit);
4

0 回答 0