Компонент редактора Draft.js не редактируется - PullRequest
Новая
       8

Компонент редактора Draft.js не редактируется

0 голосов
/ 01 октября 2018

Попытка узнать, как использовать компонент DraftJS React в моих собственных приложениях, и у меня есть большая проблема.Я следовал примеру, расположенному здесь .

Я использовал create-react-app, чтобы получить базовый шаблон, и я импортировал объекты Editor и state и реализовал их, как в примере. 

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


class App extends Component {
  constructor(props){
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <div className='container'>
      <h2> Welcome to the editor</h2>
      <Editor 
         editorState={this.state.editorState} 
         onChange={this.onChange} 
         placeholder='Make Something Great.' />
      </div>
    );
  }
}

export default App;

Эта проблема в том, что он отображает H1 и редактор с текстом заполнителя, но он просто не позволяет мне изменять содержимое редактора.

I 'Я уверен, что что-то упустил.Что мне нужно сделать, чтобы включить редактирование?

ОБНОВЛЕНИЕ: Оказалось, что это на самом деле редактирование, мне просто нужно было щелкнуть чуть ниже заполнителя.Странно, но хорошо.

1 Ответ

0 голосов
/ 01 октября 2018

Это происходит потому, что файл Draft.css не включен.

Конечный компонент должен выглядеть следующим образом: 

import React, { Component } from 'react';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';


class App extends Component {
  constructor(props){
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <div className='container'>
      <h2> Welcome to the editor</h2>
      <Editor 
          editorState={this.state.editorState}
          onChange={this.onChange} 
          placeholder='Make Something Great.' />
      </div>
    );
  }
}

export default App;
...