單擊按鈕不會使用 Draft.js 添加內聯樣式

Question

我正在嘗試將使用 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>
        );
    }
}

Answer 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'

從文檔：

渲染編輯器時應包含此 CSS，因為這些樣式設置了文本對齊、間距和其他重要功能的默認值。 沒有它，您可能會遇到塊定位、對齊和光標行為的問題。

Answer 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'));