css - 如何使用 React Codemirror 自动提示 css 关键字？

Question

我正在尝试使用反应包装器库https://www.npmjs.com/package/react-codemirror2使用代码镜像浏览器编辑器实现 css 的自动建议

我已经尝试过 editor.execCommand('autocomplete');onchange 事件，但它会使浏览器崩溃

我的尝试

import ReactDOM from "react-dom";
import React from "react";
import {UnControlled as CodeMirror} from 'react-codemirror2';

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/hint/show-hint.css';

require('codemirror/mode/css/css');
require('codemirror/addon/hint/css-hint');
require('codemirror/addon/hint/show-hint');
require('codemirror/addon/edit/closebrackets');
require('codemirror/addon/lint/lint');
require('codemirror/addon/display/autorefresh');


const App = () => {

    const handleChange = (editor, data, value) => {

        console.log(editor, data, value);

        /* Crash the browser */
        // editor.execCommand('autocomplete');
    }
    return(
        <div>
            <CodeMirror
                value='body{ background: red }'
                options={{
                    mode: 'css',
                    theme: 'material',
                    lineWrapping: true,
                    smartIndent: true,
                    lineNumbers: true,
                    foldGutter: true,
                    autoCloseTags: true,
                    matchBrackets: true,
                    autoCloseBrackets: true,
                    autoRefresh:true
                }}
                onChange={handleChange}
            />
        </div>
    )
}

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

提前致谢

Answer 1

您可以使用editor.showHint({ completeSingle: false })而不是editor.execCommand('autocomplete');

const handleChange = (editor, data, value) => {
  editor.showHint({ completeSingle: false });
};

---

您还可以使用此Github issue中所述的某些组合键来触发它

<CodeMirror
  options={{
    extraKeys: {'Ctrl-Space': 'autocomplete'}, // pressing CTRL + Space will trigger autocomplete
  }}
/>