React onChange方法未从组件运行

如何解决React onChange方法未从组件运行

我试图覆盖组件中的onChange方法，但是该方法未在任何DOM事件（如onChange，onClick，onDblClick等）上运行。这是呈现组件的部分和组件的代码。这是所用软件包的onChange Documentation。任何帮助将不胜感激，感谢您抽出宝贵的时间：）

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;

解决方法

错误是您没有将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;