Question

我有以下使用Draft.js的React组件：

class Create extends React.Component<{}, CreateState>{

constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
        short: "",
        title: "",
        editorState: EditorState.createEmpty()
    }
}

private handleTitleChange = (e: any) => this.setState({
    title: e.target.value
})

private handleShortChange = (e: any) => this.setState({
    short: e.target.value
})

private handleEditorChange = (e: EditorState) => {
    this.setState({
        editorState: e
    })
}

/**
 * Toggle the current inline style of the editor based on the butons pressed in the toolbar
 */

private toggleInlineStyle = (style: InlineStyles, e: any) => {
    e.preventDefault();
    switch (style) {
        case InlineStyles.BOLD: this.handleEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, "BOLD")); break;
        case InlineStyles.ITALIC: this.handleEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, "ITALIC")); break;
        case InlineStyles.UNDERLINE: this.handleEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, "UNDERLINE")); break;
        case InlineStyles.STRIKE: this.handleEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, "STRIKETHROUGH")); break;
        default: break;
    }
}


render() {
    return (
        <main id="create-main">
            <form id="create-form">

                <TextField className="create-form-title" label="Titlu" value={this.state.title}
                    onChange={this.handleTitleChange} />
                <TextField textarea className="create-form-short" characterCount maxLength={160} label="Varianta scurtă a articolului"
                    onChange={this.handleShortChange} value={this.state.short} />
                <Button className="create-form-post-button" label="Postează"></Button>
            </form>
            <section id="create-form-editor-container">
                <div id="create-form-toolbar">

                    <span className="create-form-toolbar-button" onClick={(e) => this.toggleInlineStyle(InlineStyles.BOLD,e)}>
                        <img src={bold} alt="bold"></img>
                    </span>
                    <span className="create-form-toolbar-button" onClick={(e) => this.toggleInlineStyle(InlineStyles.ITALIC,e)}>
                        <img src={italic} alt="italic"></img>
                    </span>
                    <span className="create-form-toolbar-button" onClick={(e) => this.toggleInlineStyle(InlineStyles.UNDERLINE,e)}>
                        <img src={underline} alt="underline"></img>
                    </span>
                    <span className="create-form-toolbar-button" onClick={(e) => this.toggleInlineStyle(InlineStyles.STRIKE,e)}>
                        <img src={strikethrough} alt="strikethrough"></img>
                    </span>
                    <div className="create-form-toolbar-spacer" />

                    <span className="create-form-toolbar-button">
                        <img src={size} alt="size"></img>
                    </span>
                </div>
                <div id="create-form-draft-container">
                    <Editor editorState={this.state.editorState} onChange={this.handleEditorChange} />
                </div>
            </section>
        </main>
    )
}

}

要切换Editor中的内联样式，我有一些用于粗体，斜体等的按钮。当我在编辑器中选择一些文本并按其中一个按钮时，一切都会按预期进行。 toggleInlineStyle被调用并应用适当的样式。

问题是，当未选择任何文本并且按任意按钮时，将调用处理程序，但未应用任何样式，这不是预期的行为。我应该怎么做才能解决这个问题？

谢谢！

Answer 1

这是因为当您单击按钮时，编辑器不在焦点上，而onClick会自动转移焦点。

因此解决将'onClick'更改为'OnMouseDown：

<span className="create-form-toolbar-button" onMouseDown={(e) => this.toggleInlineStyle(InlineStyles.BOLD,e)}><img src={bold} alt="bold"></img></span>

并将domEditor.current.focus添加到处理程序中：

this.handleEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, "BOLD")); domEditor.current.focus(); break;

没有文本选择，Draft.js内联样式无法正常工作

1 个答案: