2

データベースからデータを読み取り、反応を介して DOM にレンダリングしようとしています。入力には、draft.js を使用し、db に保存する前に convertToRaw を実行しました。ただし、convertFromRaw とレンダリングを実行すると、コンソールに次のエラーが表示されます。draft.js を使用するのはこれが初めてなので、何が間違っているのかわかりません。誰か助けてくれませんか？どうもありがとう！

//App.js


import React, {
  Component
}
from 'react';
import Blogs from './blogs';
import {
  Editor, EditorState, convertToRaw
}
from 'draft-js'
  // include horizon client
const Horizon = require('@horizon/client');
const horizon = Horizon({
  secure: false
});
// init blogs collection in rethinkdb
const blogger = horizon('blogs')

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: false,
      author: false,
      editorState: EditorState.createEmpty()
    }
  }

  // watch form values for change
  handleChangeTitle(event) {
    this.setState({
      title: event.target.value
    });
  }
  handleChangeAuthor(event) {
    this.setState({
      author: event.target.value
    });
  }
  handleChangeBody(editorState) {
    this.setState({
      editorState
    });
  }

  writeBlog() {
    // check for empty string and return error to user
    if (this.state.title === false || this.state.author === false || this.state.body === false) {
      alert('Invalid Submission: One or more fields are empty');
      return;
    }
    let blog = {
      title: this.state.title,
      author: this.state.author,
      editorState: convertToRaw(this.state.editorState.getCurrentContent())
    };
    // store the inputs in the database
    blogger.store(blog);
  }

  render() {
    return ( < form >
      < div className = "center" >
      < Blogs blogger = {
        blogger
      }
      />
                    <div className="writer">
                    <div className="basic-inputs">
                        <div className="input-unit">
                            <label>Title</label >
      < input onChange = {
        this.handleChangeTitle.bind(this)
      } > < /input>
                        </div >
      < div className = "input-unit" >
      < label > Author < /label>
                            <input onChange={this.handleChangeAuthor.bind(this)}></input >
      < /div>
                    </div >
      < label > Blog < /label>
                    <Editor onChange={this.handleChangeBody.bind(this)} editorState={this.state.editorState} / >
      < button onClick = {
        this.writeBlog.bind(this)
      } > Post < /button>
                    </div >
      < /div>
            </form >
    );
  }
}

export
default App;

import React, { Component } from 'react';
import {convertFromRaw} from 'draft-js'

export default class Blog extends Component {
    constructor(props) {
        super(props)
        this.props = props;

    }

    render() {
        return (
            <div className="blog-container">
            <h2 className="title">{this.props.blg.title}</h2>
            <h4 className="author">{this.props.blg.author}</h4>
            <p className="body">{convertFromRaw(this.props.blg.body)}</p>
            </div>
        );
    }
}

4

1 に答える 1

1

これらの関数を使用して ContentState を生に変換し、生のオブジェクトから EditorState に戻しています。

raw に変換するときに、editorState を文字列化する必要がある場合があります。その後、ブログ コンポーネントで使用しようとするときに解析が必要になる場合があります。

/**
 * @param { EditorState } editorState
 * @returns { object }
 */
export const toRaw = editorState => {
  return convertToRaw(editorState.getCurrentContent());
};

/**
 * @param { EditorState } editorState
 * @param { object } raw
 * @returns { EditorState }
 */
export const fromRaw = (editorState, raw) => {
  return EditorState.push(editorState, convertFromRaw(raw), 'update-state');
};

また、次のように localStorage から EditorState を取得します。

  componentWillMount() {
    if (!window.localStorage) {
      return;
    }
    const _editorState = localStorage.getItem('editorState');
    if (_editorState) {
      const parsedEditorState = JSON.parse(_editorState);
      const editorState = EditorState.push(
        this.state.editorState,
        convertFromRaw(parsedEditorState),
        'update-state'
      );
      this.setState({ editorState });
    }
  }
于 2016-10-12T23:10:33.067 に答える