draft.js内联样式的按钮

Question

我对draft.js完全陌生，只是没有使内联样式的更改按钮起作用。

    import React, { Component } from "react";
    import { Editor, EditorState, RichUtils } from "draft-js";

    class NoteEditor extends Component {
      constructor(props) {
        super(props);
        this.state = { editorState: EditorState.createEmpty() };

        this.onChange = editorState => this.setState({ editorState });

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

      _onClick(e) {
        this.onChange(
          RichUtils.toggleInlineStyle(this.state.editorState, e.target.value)
        );
      }

      render() {
        const styles = ["BOLD", "UNDERLINE", "ITALIC", "CODE"];
        const buttons = styles.map(style => {
          return (
            <button
              key={style}
              name={style}
              className="btn"
              onClick={this._onClick}
            >
              {style}
            </button>
          );
        });

        return (
          <div>
            <div className="toolbar">{buttons}</div>
            <Editor
              editorState={this.state.editorState}
              handleKeyCommand={this.handleKeyCommand}
              onChange={this.onChange}
            />
          </div>
        );
      }
    }

    export default NoteEditor;

键盘命令正常运行，没有问题，但是单击其中一个按钮不起作用。谁对draf.js更熟悉吗？