Javascript 单击按钮不会使用draft.js添加内联样式

我正在尝试使用draft.js向react项目添加富文本编辑器。我已经能够添加它，并通过遵循他们的文档来处理键盘命令。我还添加了两个按钮来使用粗体和斜体，但问题是，当我单击按钮时，编辑器状态没有改变，并且没有添加内联样式，但是如果我选择文本并单击按钮，样式将添加到该文本中。我不明白我哪里做错了

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

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {editorState: EditorState.createEmpty()};
        this.onChange = (editorState) => this.setState({editorState});
        this.handleKeyCommand = this.handleKeyCommand.bind(this);
    }

    handleKeyCommand(command, editorState) {
        const newState = RichUtils.handleKeyCommand(editorState, command);
        if (newState) {
            this.onChange(newState);
            return 'handled';
        }
        return 'not-handled';
    }

    _onBoldClick() {
        this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'BOLD'));
    }

    _onItalicClick() {
        this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'ITALIC'));
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">Text formatting using Draft.js</h1>
                </header>
                <div className="toolbar">
                    <button className="btn" onClick={this._onBoldClick.bind(this)}>B</button>
                    <button className="btn" onClick={this._onItalicClick.bind(this)}>I</button>
                </div>
                <div className="notePage">
                    <Editor
                        editorState={this.state.editorState}
                        handleKeyCommand={this.handleKeyCommand}
                        onChange={this.onChange}
                        isCollapsed="true"
                    />
                </div>
            </div>
        );
    }
}

import React，{Component}来自'React'；
从“草稿js”导入{Editor，EditorState，RichUtils}；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={editorState:editorState.createEmpty（）}；
this.onChange=（editorState）=>this.setState（{editorState}）；
this.handleKeyCommand=this.handleKeyCommand.bind（this）；
}
handleKeyCommand（命令，编辑器状态）{
const newState=RichUtils.handleKeyCommand（editorState，command）；
如果（新闻状态）{
这个.onChange（newState）；
返回“已处理”；
}
返回“未处理”；
}
_onBoldClick（）{
this.onChange（RichUtils.toggleInlineStyle(
this.state.editorState，'BOLD'）；
}
_单击（）{
this.onChange（RichUtils.toggleInlineStyle(
this.state.editorState，'ITALIC'）；
}
render（）{
返回(
使用Draft.js设置文本格式
B
我
);
}
}

发生这种情况是因为默认情况下，

onClick

会导致

Editor

失去焦点。要解决此问题，请执行以下操作：

  _onBoldClick (e) {
    e.preventDefault()
    this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'BOLD'))
  }

  _onItalicClick (e) {
    e.preventDefault()
    this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'ITALIC'))
  }

并将

onClick

更改为

onMouseDown

：

<button className='btn' onMouseDown={this._onBoldClick.bind(this)}>B</button>

<button className='btn' onMouseDown={this._onItalicClick.bind(this)}>I</button>

发件人：

在呈现编辑器时，应该包含此CSS，因为这些样式为文本对齐、间距和其他重要功能设置了默认值。如果没有它，您可能会遇到块定位、对齐和光标行为方面的问题

---

您可以在

react 16 with hooks

中这样尝试， 只要通过

e

，它就会工作

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState, RichUtils} from 'draft-js';
import 'draft-js/dist/Draft.css';
import './MyEditor.css'

export default function MyEditor() {
  
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty(),
  );

  
  // tried with onclick (but not working as expected) so used mousedown event 
  const _onBoldClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
  }  
  const _onBoldMouseDown = (e) => {
    e.preventDefault();
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
  }

  const _onItalicMouseDown = (e) => {
    e.preventDefault();
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'ITALIC'))
  }

  const _onUnderlineMouseDown = (e) => {
    e.preventDefault();
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'UNDERLINE'))
  }

  return(
    <div>
        <button onMouseDown={ e => { _onBoldMouseDown(e) } }>B</button>
        <button onMouseDown={ e => { _onItalicMouseDown(e) } }><i>I</i></button>
        <button onMouseDown={ e => { _onUnderlineMouseDown(e) } }>U</button>

        <div>
          <Editor 
            textAlignment="left" placeholder="Enter something here" 
            editorState={editorState} onChange={setEditorState} />
        </div>
        
    </div>
  ) 
  
    
}

//ReactDOM.render(<MyEditor />, document.getElementById('container'));

import React，{useffect，useState}来自“React”；
从“react dom”导入react dom；
从“草稿js”导入{Editor，EditorState，RichUtils}；
导入'draft js/dist/draft.css'；
导入“./MyEditor.css”
导出默认函数MyEditor（）{
常量[editorState，setEditorState]=React.useState(
（）=>EditorState.createEmpty（），
);
//尝试使用onclick（但未按预期工作），因此使用了mousedown事件
const_onBoldClick=（）=>{
setEditorState（RichUtils.toggleInlineStyle（editorState，'BOLD'））
}  
常数boldmousedown=（e）=>{
e、 预防默认值（）；
setEditorState（RichUtils.toggleInlineStyle（editorState，'BOLD'））
}
常数（e）=>{
e、 预防默认值（）；
setEditorState（RichUtils.toggleInlineStyle（editorState，'ITALIC'））
}
常量onUnderlineMouseDown=（e）=>{
e、 预防默认值（）；
setEditorState（RichUtils.toggleInlineStyle（editorState，'UNDERLINE'））
}
返回(
{{u onBoldMouseDown（e）}>B
{u onItalicMouseDown（e）}>I
{{U onUnderlineMouseDown（e）}>U
) 
}
//ReactDOM.render（，document.getElementById（'container'））；

非常好的提示，但问题可能是。即使有前面提到的更改，我也能够重现这个问题

toggleInlineStyle

可以工作，但它只会切换所选文本（如果有）。这似乎是违反直觉的，因为当前编辑器状态被传递给

RichUtils

，就像

RichUtils.toggleInlineStyle（editorState，'BOLD'）

一样。

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState, RichUtils} from 'draft-js';
import 'draft-js/dist/Draft.css';
import './MyEditor.css'

export default function MyEditor() {
  
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty(),
  );

  
  // tried with onclick (but not working as expected) so used mousedown event 
  const _onBoldClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
  }  
  const _onBoldMouseDown = (e) => {
    e.preventDefault();
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
  }

  const _onItalicMouseDown = (e) => {
    e.preventDefault();
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'ITALIC'))
  }

  const _onUnderlineMouseDown = (e) => {
    e.preventDefault();
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'UNDERLINE'))
  }

  return(
    <div>
        <button onMouseDown={ e => { _onBoldMouseDown(e) } }>B</button>
        <button onMouseDown={ e => { _onItalicMouseDown(e) } }><i>I</i></button>
        <button onMouseDown={ e => { _onUnderlineMouseDown(e) } }>U</button>

        <div>
          <Editor 
            textAlignment="left" placeholder="Enter something here" 
            editorState={editorState} onChange={setEditorState} />
        </div>
        
    </div>
  ) 
  
    
}

//ReactDOM.render(<MyEditor />, document.getElementById('container'));