javascript - Draft.js 's RichUtils.toggleInlineStyle doesn' 工作

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

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

我在 github 线程中发现了此修复 here 。为方便起见，引用:

However, using onClick causes the text area to go out of focus and the style isn't toggled. I did some digging and found other solutions that suggested using preventDefault on the onClick function, but that doesn't do anything. With this event handler, the style is toggled only if the text is highlighted first and doesn't allow for the text to be styled prior to typing. I saw another solution that suggested replacing onClick with onMouseDown as it doesn't cause the text area to lose focus. I tried this, and it worked. I also delved into the source code for Draft.js, and in the demo editor code I saw this code:

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