Нажатие на кнопку не добавляет встроенный стиль с использованием draft.js

Question

Я пытаюсь добавить текстовый редактор с использованием 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>
        );
    }
}

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