响应未从组件运行的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;

​