问题标签 [react-codemirror]

我有一个项目，我使用 Formik 和 react-codemirror2，我想控制 Formik 中的 onChange，但 codemirror2 中的 onChange 没有事件......而且我不知道如何使用......让我更好地解释一下：我有一个formink：

我有我的函数handleChange：

其中 CustomInputComponent 是我的 codemirror2 组件：

如果我使用另一个组件作为来自 Materia-UI 的 textField 它可以工作，我不需要在我的 CustomInputComponent 上调用 onChange ，即由 formink 直接调用......因为 textField 的 onChange 也有作为参数事件......但是作为您可以在代码中看到 codeMirror 的 onChange 没有事件...

我需要调用我的handleChange而不是codeMirror的onChange ...我试图做这样的事情：

或使用：

或者：

但没有任何工作我的函数handleChange永远不会调用如何将react-codeMirror2与Formik一起使用？有可能吗？我怎样才能接收到Formink的onChange？？？？？？

来自 google 的 Datastudio 使用 codemirror 来创建自定义变量。

如果存在变量，则选择它们会突出显示该变量。

想做完全一样的，但不知道从哪里开始。

我尝试使用收到的道具更新我的 CodeMirror 组件（从 react-codemirror 导入）的值，但即使道具发生了变化，该值也不会改变。而且因为我使用 corsanywhere 从 API 加载以克服 CORS 限制，所以有时获取请求会失败。但是，当 fetch 成功时，该值仍然没有更新。

这是我尝试的屏幕截图：

这是我在输入中键入“hello world”时两个日志语句的控制台输出，证明道具已更新：

请参阅下面的答案以获取解决方案

如何将自定义组件的输出保存回 React Admin 模型？

我有一个带有一个自定义组件的表单，它是一个 CodeMirror 字段。对其他所有内容的更改正确保存。但是我的 CodeMirror 字段虽然可以作为编辑器正常工作并根据需要进行配置，但不会保存更改。

我是 React-Admin 的新手，对 React 的经验有限，所以我想我缺少一些基本的东西。

我在这里强调handleChange不是因为我认为那是我认为更改所属的地方，而只是为了证明如果我需要一个地方来挂正确的代码，我有一个。一个onBlur可能会更好。关键是我确实有办法通过访问我的字段和 CodeMirror 实例来运行我需要的任何代码。

（ curried 版本handleChange似乎有点奇怪，但这是必要的，因为我正在使用的 CodeMirror 包装器和 React-Admin 的某些组合似乎失去了我的this参考，即使我使用bind(this)了 . 但是我输入了正确设置的函数field，所以这行得通.)

CodeMirror 在这里一切似乎都是正确的。我想我只需要知道如何使更改正确反映。

我不知道它是否相关，但我正在使用React CodeMirror Wrapper。

我试图获取下面的代码以在单击按钮时显示 CodeMirror onChange 值，然后在“输出”div 中显示该值。

我对做出反应还很陌生，所以不确定是否最好通过状态传递值，或者是否有更简单的方法。

到目前为止，这是我的代码：

我试图在代码镜像组件上实现类似的效果，这可以通过溢出来实现：隐藏在 div 上。

在实践中，这意味着：

• 没有可见的滚动条
• 当编辑器上发生“滚动动作”时，网站主体会自行移动（即，无法相对于网站滚动编辑器）

我怎么能那样做？

附言

一个简单的“溢出：隐藏”不起作用，因为它看起来像 CodeMirror 为垂直滚动条和水平滚动条创建了一个单独的 div。我的猜测是 javascript 用于处理实际的滚动行为。我需要javascript来恢复它吗？

PSS

我正在使用react-codemirror2，但正在寻找一个通用的答案，并且很高兴弄清楚如何在 react 中执行它。

我正在使用CodeMirror进行语法高亮显示。当用户单击文本时，我想触发一个弹出窗口。我正在使用 React Tippy——一个基于 Tippy.js 的 React 组件。

基本上，我没有收到任何提示弹出窗口。我也没有收到任何错误。

我在这里有一个沙盒示例：https ://codesandbox.io/s/focused-currying-uo469

我有一个 codemirror 对象。当光标悬停在代码上时，我想在代码镜像编辑器顶部显示一个提示按钮。

到目前为止，我可以检测到鼠标何时悬停，但我无法在编辑器顶部显示任何内容。我的代码在下面，我这里也有一个沙箱

我的另一个想法是尝试将令牌包装在一个小费按钮中？但我不确定如何做出反应。我查看了这个使用 codemirror 解析器的反应语法荧光笔，我相信我找到了对代码块进行样式化的代码：

我会做一些事情createElement来创建小费按钮吗？

我需要在我的基于 React Boilerplate 的应用程序上放置一个 Javascript 编辑器，并且我已经按照此处的说明安装了 React-codemirror2 。我也有这个沙盒，它可以按预期工作。但是，当将代码放回我的应用程序时，自动完成功能停止工作。

我发现的所有示例和问题都已过时且不起作用。

这是一个带有可重现示例的仓库。代码在components/Editor/CodeEditor.js你可以看到一切都是一样的，除了不加载自动完成。

我该如何解决这个问题？

我想更改事件 dbl click 但我的代码不正确且不起作用 我想要代码做什么

我的代码

我的代码镜像的 jquery 代码