我在 Next.js 應用程式中使用react-codemirror2 Editor。默認情況下，編輯器會標記語法驗證錯誤和警告。我想確保用戶保存代碼時代碼中沒有語法錯誤。我需要訪問驗證結果，我不知道如何實作。這是我的代碼：
import React, { Fragment } from "react";
let CodeMirror;
export default class Editor extends React.Component {
state = {
render: false,
code: "",
};
componentDidMount = () => {
CodeMirror = require("react-codemirror2");
require("codemirror/lib/codemirror.css");
require("codemirror/theme/eclipse.css");
require("codemirror/addon/lint/lint.css");
require("codemirror/addon/hint/show-hint.css");
require("codemirror/mode/javascript/javascript.js");
require("codemirror/addon/lint/javascript-lint");
require("codemirror/addon/lint/lint.js");
require("codemirror/addon/hint/javascript-hint");
const { JSHINT } = require("jshint");
window.JSHINT = JSHINT;
this.setState({ render: true });
};
SaveCode() {
// here I need to validate the [this.state.code]
// if there is no syntax error then save it
}
render() {
if (!this.state.render) return null;
const { UnControlled } = CodeMirror;
return (
<>
<UnControlled
value={this.state.code}
onBeforeChange={(a, b, value) => {
this.setState({ code:value });
}}
options={{
readOnly: false,
mode: "javascript",
theme: "eclipse",
lineNumbers: true,
lint: true,
}}
/>
<div style={{ padding: "10px 25px 25px", textAlign: "right" }}>
<button onClick={this.SaveCode}>Save</button>
</div>
</>
);
}
}
uj5u.com熱心網友回復：
您可以使用該onUpdateLinting函式接收 linting 錯誤。像這樣更改組件lint的optionsprop 中的欄位CodeMirror：
lint: {
onUpdateLinting: this.handleErrors,
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/312685.html