React onChange方法未从组件运行

Question

我试图覆盖组件中的onChange方法，但该方法没有在任何DOM事件上运行，如onChange、onClick、onDblClick等。以下是渲染组件的部分和组件的代码。这是正在使用的软件包的onChange文档。任何帮助都将不胜感激，感谢您抽出时间：(

import React, { useState } from "react";
import JsEditor from "../editor/dynamic/JsEditor";
const Contribute = () => {
const [jsCode, setJsCode] = useState("");
const onChange = () => {
{
console.log("Js change fired");
}
};
return (
<div>
<JsEditor onChange={onChange} />
</div>
);
};
export default Contribute;

组件代码

import React from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/hint/show-hint.css';

import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/addon/lint/lint.js';
import 'codemirror/addon/hint/javascript-hint';
import { JSHINT } from 'jshint';
window.JSHINT = JSHINT;
const JsEditor = () => {
return (
<div>
<h1> JavaScript </h1>
<CodeMirror
value='//Write your JavaScript here :)'
options={{
gutters: ["CodeMirror-lint-markers"],
mode: "javascript",
theme: "material",
lineNumbers: true,
lineWrapping: true,
lint: true, 
}}

/>
</div>
);
};
export default JsEditor;

Answer 1

错误是您没有将onChange道具传递给CodeMirror。检查下面的代码，我会标记差异

import React from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/hint/show-hint.css';

import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/addon/lint/lint.js';
import 'codemirror/addon/hint/javascript-hint';
import { JSHINT } from 'jshint';
window.JSHINT = JSHINT;
const JsEditor = ({onChange}) => { // Receive the onChange passed to your component
return (
<div>
<h1> JavaScript </h1>
<CodeMirror
value='//Write your JavaScript here :)'
options={{
gutters: ["CodeMirror-lint-markers"],
mode: "javascript",
theme: "material",
lineNumbers: true,
lineWrapping: true,
lint: true, 
}}
onChange={onChange} // Pass the onChange prop to the library

/>
</div>
);
};

export default JsEditor;