处理 DraftJS 的 handleBeforeInput 中的多个操作答案

【问题标题】：Handle multiple actions in handleBeforeInput for DraftJS处理 DraftJS 的 handleBeforeInput 中的多个操作
【发布时间】：2018-03-18 00:04:39
【问题描述】：

我正在解决这种情况。如果用户按'1。 '，我将块更改为有序块。以下是我更改它的代码：

_handleBeforeInput(str) {
    if (str !== '.') {
        return false;
    }
    const { editorState } = this.state;
    const selection = editorState.getSelection();

    const currentBlock = editorState.getCurrentContent()
        .getBlockForKey(selection.getStartKey());
    const blockLength = currentBlock.getLength();

    if (blockLength === 1 && currentBlock.getText() === '1') {
        this.onChange((utilFn.resetBlockType(editorState, 'ordered-list-item')));
        return 'handled';
    }
    return 'not-handled';
}

但是，一旦用户创建了ordered-list-item 块，我想对正在创建的块设置限制。我尝试使用这个问题的答案：[How to limit Max Length of Draft js，但是我不知道如何在 handlebeforeInput 中处理多个处理程序。

我尝试使用开关盒等，但没有帮助。

如果有人遇到过这个问题，请帮助我。谢谢！

【问题讨论】：

标签： javascript reactjs draftjs

【解决方案1】：

我意识到我的错误...使用多个 if-else 非常简单，以下是调整后的代码：

_handleBeforeInput(str) {
    const { editorState } = this.state;
    const selection = editorState.getSelection();
    const currentBlock = editorState.getCurrentContent()
                            .getBlockForKey(selection.getStartKey());
    const blockLength = currentBlock.getLength()

    const currentContent = this.state.editorState.getCurrentContent();
    const currentContentLength = currentContent.getPlainText('').length

    if (currentContentLength > 10 - 1){
        alert('you can type max ten characters');
        return 'handled';
    }else if (str !== '.') {
        return 'not-handled';
    }else if(str === '.'){
        if (blockLength === 1 && currentBlock.getText() === '1') {
            this.onChange((utilFn.resetBlockType(editorState, 'ordered-list-item')));
            return 'handled';
        }
    }
    return 'not-handled';
}

【讨论】：