Как использовать RichUtils с React Hooks

Question

Я пытаюсь реализовать кнопку, которая меняет встроенный стиль на жирный после нажатия на нее. Я хочу реализовать этот пример , но с использованием React Hooks.

После нажатия кнопки RichUtils выполняется, но не меняет текст на полужирный. Чего мне не хватает?

import React, { useEffect, useRef, useState } from 'react';
import {Editor, EditorState, RichUtils}       from 'draft-js';

const MyEditor = () => {

    const [editorState, setEditorState] = useState(EditorState.createEmpty());
    const editor                        = useRef(null);

    const focusEditor = () => {

        editor.current.focus();

    }

    const boldText = () => {

        let nextState = RichUtils.toggleInlineStyle(editorState, 'BOLD');

        setEditorState(nextState);

    }

    return (
        <div onClick = {focusEditor}>
            <button onClick = { () => boldText()}>Bold</button>
            <Editor
                ref = {editor}
                editorState = {editorState}
                onChange = {editorState => setEditorState(editorState)}
            />
        </div>
    );
}

export default MyEditor;

Answer 1

Мне не совсем понятно, почему, но ваша функция фокусировки, кажется, прерывает смелое переключение. Удаление этого параметра позволило переключению функционировать так же, как в примере, с которым вы связались.

const MyEditorFunctional = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const boldText = () => {
    const nextState = RichUtils.toggleInlineStyle(editorState, "BOLD");

    setEditorState(nextState);
  };

  return (
    <div>
      <button type="button" onClick={boldText}>
        Bold
      </button>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
      />
    </div>
  );
};