Draft.js 的 RichUtils.toggleInlineStyle 不起作用

Question

Draft.js 的 RichUtils.toggleInlineStyle 不能正常工作。请帮忙！我的代码在JSfiddle 上。

有什么误解吗？

var TextArea = React.createClass({
  ...
  toggleBlockStyle: function(blockType) {
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType)); // don't work!
  },

  toggleInlineStyle: function(inlineStyle) {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle)); // don't work!
  },

  handleClear: function() {
    this.onChange(EditorState.push(this.state.editorState, 
        ContentState.createFromText(''), 'remove-range')); // don't work!
  },
  ...
  render: function() {
    return (
      <div onClick={this.onFocus}>
        {this.renderButtons()}
        <Editor editorState={this.state.editorState}
          className={this.props.className}
          name={this.props.name} ref="editor"
          placeholder={this.props.placeholder}
          handleKeyCommand={this.handleKeyCommand}
          onChange={this.onChange}
          spellCheck={true}
          stripPastedStyles={true}
          customStyleMap={myStyleMap}/>
      </div>);
   }
}

Answer 1

当您使用按钮切换样式时，它会导致编辑器失去焦点并且不会应用样式。而不是onClick，使用onMouseDownwhich 在编辑器失去焦点之前触发。

我在此处的 github 线程中找到了此修复程序。为方便起见引用：

但是，使用 onClick 会导致文本区域失去焦点并且不会切换样式。我做了一些挖掘并找到了其他建议在 onClick 函数上使用 preventDefault 的解决方案，但这没有任何作用。使用此事件处理程序，仅当首先突出显示文本并且不允许在键入之前设置文本样式时才会切换样式。我看到另一个解决方案建议用 onMouseDown 替换 onClick，因为它不会导致文本区域失去焦点。我试过这个，它奏效了。我还深入研究了 Draft.js 的源代码，在演示编辑器代码中我看到了这段代码：

 //...
  render() {
//...
    return (
      <span className={className} onMouseDown={this.onToggle}>
        {this.props.label}
      </span>
    );
  }
};