draft-js插件在使用中RichUtils函数库不起作用

       facebook推出的draft-js富文本编辑器并不是一个开箱可用的编辑器，如果我们按照github上面的配置引入的话，得到一个类似输入框的编辑器。

      但是draft-js提供了一个 RichUtils函数库，里面提供了丰富的函数，让我们可以自己设计自己的编辑器。

      在开发的过程中，如下，我按照官方的例子写了一个简单的编辑器

import React, { Component } from 'react'
import {Editor, EditorState, RichUtils} from 'draft-js';
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      editorState: EditorState.createEmpty(),
      styles : {
        editor: {
          border: '1px solid gray',
          minHeight: '6em'
        }
      }
    }
    this.setEditor = (editor) => {
      this.editor = editor
    }
    this.focusEditor = () => {
      this.editor.focus()
    };
    this.onChange = (editorState) => this.setState({editorState});
    this.toggleInlineStyle = this.toggleInlineStyle.bind(this);
  }
  componentDidMount() {
    this.focusEditor();
  }
  toggleInlineStyle() {
    this.onChange(
      RichUtils.toggleCode(
        this.state.editorState
      )
    );
  }
  render() {
    const {editorState, styles} = this.state
    return (
      <div style={styles.editor} onClick={this.focusEditor} >
        <div>
          <span onClick={() => this.toggleInlineStyle()}>Bold</span>
        </div>
        <Editor
          ref={this.setEditor}
          editorState={editorState}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

但是很遗憾，我点击加粗的时候它没有任何反应。后来查了一下，stackoverflow有人回答说，引入

Draft.css文件就可以了。但是我引入了之后发现还是不起作用。

最后我将代码段中的

focusEditor函数中的

this.editor.focus()函数删掉之后就可以了。

这是效果图：

这是修改后的代码：

import "draft-js/dist/Draft.css";
import React, { Component } from 'react'
import {Editor, EditorState, RichUtils} from 'draft-js';
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      editorState: EditorState.createEmpty(),
      styles : {
        editor: {
          border: '1px solid gray',
          minHeight: '6em'
        }
      }
    }
    this.onChange = (editorState) => this.setState({editorState});
    this.toggleInlineStyle = this.toggleInlineStyle.bind(this);
  }
  toggleInlineStyle() {
    this.onChange(
      RichUtils.toggleCode(
        this.state.editorState
      )
    );
  }
  render() {
    const {editorState, styles} = this.state
    return (
      <div style={styles.editor} onClick={this.focusEditor} >
        <div>
          <span onClick={() => this.toggleInlineStyle()}>Bold</span>
        </div>
        <Editor
          editorState={editorState}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

虽然不知道前一个版本的为什么不可以，也不知道为什么删掉那个函数之后就可以，但是好歹起作用了