时间戳

首页 > 解决方案 > 反应：提示按钮不显示 onCursorActivity

javascript - 反应：提示按钮不显示 onCursorActivity

问题描述

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

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

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

import React from "react";
import ReactDOM from "react-dom";
import 'react-tippy/dist/tippy.css'
import {
  Tooltip,
} from 'react-tippy';
//import "codemirror-extension"
/* eslint no-restricted-globals: "off"*/



function App() {
  return (
    <div className="App">
      <CodeMirror
        value="<h1>I ♥ react-codemirror2</h1>"
        options={{
          mode: "xml",
          theme: "material",
          lineNumbers: true
        }}
        onCursorActivity={(editor) => {
          console.log("tuppppy");
          return (
          <div id="parent">
            <Tooltip id="sib"
            trigger="click"
            html={(
              <div id="poop">
                <strong>
                  Hello
                </strong>
              </div>)}
            >
            </Tooltip>
            </div>
          );
        }}
        />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 export default App;

标签： javascriptreactjscodemirrortippyjsreact-codemirror

解决方案

根据其文件

“cursorActivity”（实例：CodeMirror）将在光标或选择移动，或对编辑器内容进行任何更改时触发。

当你返回一个 jsx 元素时它什么也不做。

React Tooltip 的工作原理是它会弹出并锚定到它的子组件。因此，您需要在 Code Mirror 上对其进行变形才能显示出来。

这是一个工作版本 https://codesandbox.io/s/jovial-varahamihira-xg6ty?fontsize=14

推荐阅读