Draft.js 编辑器组件不可编辑答案

【问题标题】：Draft.js Editor Component isn't editableDraft.js 编辑器组件不可编辑
【发布时间】：2018-10-01 18:09:34
【问题描述】：

尝试学习如何在我自己的应用程序中使用 DraftJS React 组件，但我遇到了一个大问题。我遵循了位于 here.

的示例

我使用create-react-app 来获取基本样板文件，并导入了编辑器和状态对象，并像示例一样实现。

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 和带有占位符文本的编辑器，但它根本不允许我更改编辑器的内容。

我很确定我错过了一些东西。我需要做什么才能启用编辑？

更新：事实证明它实际上是可编辑的，我只需要单击占位符下方。奇怪但没关系。

【问题讨论】：

标签： javascript reactjs draftjs

【解决方案1】：

这是因为没有包含 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;

【讨论】：