问题标签 [react-codemirror]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 是否可以将 react-codemirror2 与 formik 一起使用?
我有一个项目,我使用 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??????
reactjs - 当 React 功能组件中的道具更改时,CodeMirror 值未更新
我尝试使用收到的道具更新我的 CodeMirror 组件(从 react-codemirror 导入)的值,但即使道具发生了变化,该值也不会改变。而且因为我使用 corsanywhere 从 API 加载以克服 CORS 限制,所以有时获取请求会失败。但是,当 fetch 成功时,该值仍然没有更新。
这是我尝试的屏幕截图:
这是我在输入中键入“hello world”时两个日志语句的控制台输出,证明道具已更新:
请参阅下面的答案以获取解决方案
javascript - 在 React-Admin 中保存自定义组件的更改
如何将自定义组件的输出保存回 React Admin 模型?
我有一个带有一个自定义组件的表单,它是一个 CodeMirror 字段。对其他所有内容的更改正确保存。但是我的 CodeMirror 字段虽然可以作为编辑器正常工作并根据需要进行配置,但不会保存更改。
我是 React-Admin 的新手,对 React 的经验有限,所以我想我缺少一些基本的东西。
我在这里强调handleChange
不是因为我认为那是我认为更改所属的地方,而只是为了证明如果我需要一个地方来挂正确的代码,我有一个。一个onBlur
可能会更好。关键是我确实有办法通过访问我的字段和 CodeMirror 实例来运行我需要的任何代码。
( curried 版本handleChange
似乎有点奇怪,但这是必要的,因为我正在使用的 CodeMirror 包装器和 React-Admin 的某些组合似乎失去了我的this
参考,即使我使用bind(this)
了 . 但是我输入了正确设置的函数field
,所以这行得通.)
CodeMirror 在这里一切似乎都是正确的。我想我只需要知道如何使更改正确反映。
我不知道它是否相关,但我正在使用React CodeMirror Wrapper。
reactjs - React 获取代码镜像值 onClick
我试图获取下面的代码以在单击按钮时显示 CodeMirror onChange 值,然后在“输出”div 中显示该值。
我对做出反应还很陌生,所以不确定是否最好通过状态传递值,或者是否有更简单的方法。
到目前为止,这是我的代码:
scroll - 禁用代码镜像元素上的滚动
我试图在代码镜像组件上实现类似的效果,这可以通过溢出来实现:隐藏在 div 上。
在实践中,这意味着:
- 没有可见的滚动条
- 当编辑器上发生“滚动动作”时,网站主体会自行移动(即,无法相对于网站滚动编辑器)
我怎么能那样做?
附言
一个简单的“溢出:隐藏”不起作用,因为它看起来像 CodeMirror 为垂直滚动条和水平滚动条创建了一个单独的 div。我的猜测是 javascript 用于处理实际的滚动行为。我需要javascript来恢复它吗?
PSS
我正在使用react-codemirror2
,但正在寻找一个通用的答案,并且很高兴弄清楚如何在 react 中执行它。
javascript - 反应:提示按钮不显示 onCursorActivity
我正在使用CodeMirror进行语法高亮显示。当用户单击文本时,我想触发一个弹出窗口。我正在使用 React Tippy——一个基于 Tippy.js 的 React 组件。
基本上,我没有收到任何提示弹出窗口。我也没有收到任何错误。
我在这里有一个沙盒示例:https ://codesandbox.io/s/focused-currying-uo469
javascript - ReactJS:在代码镜像编辑器顶部显示另一个 UI 元素
我有一个 codemirror 对象。当光标悬停在代码上时,我想在代码镜像编辑器顶部显示一个提示按钮。
到目前为止,我可以检测到鼠标何时悬停,但我无法在编辑器顶部显示任何内容。我的代码在下面,我这里也有一个沙箱
我的另一个想法是尝试将令牌包装在一个小费按钮中?但我不确定如何做出反应。我查看了这个使用 codemirror 解析器的反应语法荧光笔,我相信我找到了对代码块进行样式化的代码:
我会做一些事情createElement
来创建小费按钮吗?
reactjs - React-Codemirror2 未加载自动完成
我需要在我的基于 React Boilerplate 的应用程序上放置一个 Javascript 编辑器,并且我已经按照此处的说明安装了 React-codemirror2 。我也有这个沙盒,它可以按预期工作。但是,当将代码放回我的应用程序时,自动完成功能停止工作。
我发现的所有示例和问题都已过时且不起作用。
这是一个带有可重现示例的仓库。代码在components/Editor/CodeEditor.js
你可以看到一切都是一样的,除了不加载自动完成。
我该如何解决这个问题?