css - 如何使用 React Codemirror 自动建议 css 关键字？

Question

我正在尝试使用 react wrapper lib 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
  }}
/>