如何使用React Codemirror来自动建议CSS关键字？

如何解决如何使用React Codemirror来自动建议CSS关键字？

我正在尝试使用react wrapper lib https://www.npmjs.com/package/react-codemirror2

使用代码镜像浏览器编辑器来实现css的自动建议。

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

我的尝试

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,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);

预先感谢

解决方法

您可以使用# In Postgres (it requires the conflict target for updates): on_conflict = [set: [body: "updated"]] {:ok,updated} = Repo.insert(%Element{id: 3,posx: 3,posy: 2,count1: 25 count2: 125},on_conflict: on_conflict,conflict_target: :id) # In MySQL (conflict target is not supported): on_conflict = [set: [title: "updated"]] {:ok,updated} = Repo.insert(%Element{posx: 3,on_conflict: on_conflict) 代替editor.showHint({ completeSingle: false })

editor.execCommand('autocomplete');

---

您也可以按照Github issue

中所述的某些键来触发它

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