单击按钮不会使用 Draft.js 添加内联样式答案

【问题标题】：Clicking on button is not adding inline style using draft.js单击按钮不会使用 Draft.js 添加内联样式
【发布时间】：2018-04-14 13:01:09
【问题描述】：

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

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>
        );
    }
}

【问题讨论】：

标签： javascript reactjs draftjs

【解决方案1】：

这是因为默认情况下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>

补充说明

始终在顶部包含Draft.css：

import 'draft-js/dist/Draft.css'

来自the documentation：

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

【讨论】：

很好的提示，但问题可能是this。即使进行了前面提到的更改，我也能够重现问题here。 toggleInlineStyle 有效，但它只切换选定的文本（如果有）。这似乎违反直觉，因为当前编辑器状态被传递给RichUtils，就像RichUtils.toggleInlineStyle(editorState, 'BOLD')一样。

【解决方案2】：

你可以在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'));

【讨论】：