Question

我正处于解决这种情况的问题。如果用户按'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中处理多个处理程序。

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

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

Answer 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';
}

处理DraftJeforeInput for DraftJS中的多个操作

1 个答案: