如何限制反应 - 杂种中的输入长度或线
#javascript #react #codemirror

codemirror是一个强大的库，允许用户将准备就绪的代码编辑器集成到其项目中。这是一个庞大的图书馆，拥有大量的文档，但您一口气却无法阅读。

tldr;

如何限制文档的长度：

 const lengthLimit = useCallback((tr: any): boolean => {
    // NOTE: limiting the length to 100 characters.
    return tr.startState.doc.length + tr.newDoc.length < 200;
  }, []);

<CodeMirror
  value={value}
  extensions={[
    EditorState.changeFilter.of(lengthLimit)
  ]}
  onChange={(value) => setValue(value)}
/>

来源[1]，[2]

同样，这也是限制行号的方式。

const handleLengthLimit = () => {
   // doc will only update with the newDoc’s line number <= 10
   return tr.newDoc.lines <= 10;
}

<CodeMirror
      extensions={[                  
          EditorState.changeFilter.of(handleLengthLimit),
      ]}
      onChange={handleChange}                      
/>

深入

React-codemirror是CodeMirror最广泛使用的反应组件。它使用CodeMirror 6背后。但是，它具有许多已知局限性，因为Codemirror的行为并不以反应方式。 （在反应之前就在那里。）

截至2023年3月，React-codeGrirr编辑器是当前的uncontrolled component

因此，当大多数React开发人员想要实现这样的目标时：

用户输入 - >更新输入状态 - >使用usememo或useemefect->更新输入状态 - > with the new Input

更新输入状态

由于组件不受控制，因此上述不工作。因此，周围的工作将是：

用户输入 - >拦截输入，并使用editorstate.changefilter或editorstate.transactionfilter->更新状态 - > rerender

如果您将其用于工作中的生产功能。我强烈建议您通过遵循this article.

进行DIY React组件

关于

如果您遇到了同样的问题，并且本文对您有所帮助：
跟随我的Github Repo
并查看我的愚蠢项目Typing Brain