addEventListner 不是第一次调用

Question

常量handleCharacterChange =（值，事件）=> {

    const plainText = value.replace(/<\/?[^>]+(>|$)/g, '');
    
    if (plainText?.length <= 250) {
        console.log(plainText,"jkldnaslkndlkas")
        setText(value)
    }else{
        console.log("aklsndakslmdlamsdlasmd  else ")
        document.getElementById("quill")?.addEventListener('keydown', (e) => handlePasteData(e));
    }

}

事件监听器不是第一次调用

如果用户输入超出最大值，则应阻止功能

Answer 1

您的代码中存在以下问题：

1- 在添加 eventListner 之前，您没有检查 id 为“quill”的元素是否存在于 DOM 中。

2- 如果超出字数限制，您将一次又一次地附加 eventListner。

您的主要问题：

3-您在超出限制时注册 eventListner，因此它不会捕获当前事件，因为没有事先注册。用技术术语来说，keydown 事件侦听器仅在 else 块执行后添加，因此它无法捕获导致超出限制的按键。

解决方案： 将 eventListner 附加到初始渲染上，就像在 useEffect 中一样，然后检查每个 keydown 的限制，这样当达到限制时它就会起作用。

注意：
如果您遵循这种方法，即最初在 useEffect 中注册 eventListner ，那么它会采用名为 text 的状态的初始值而不是更新值，因此您必须使用 Ref 而不是状态，或者同时使用状态和 ref 但使它们同步来解决该问题。

如果您有进一步疑问或需要代码片段，请告诉我。 快乐编码:)