反应 onChange 方法不是来自组件的运行

Question

我正在尝试覆盖组件中的 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;

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;

反应 onChange 方法不是来自组件的运行

React onChange method not running from component

javascript

codemirror

reactjs

react-codemirror

反应 onChange 方法不是来自组件的 运行

React onChange method not running from component

javascript

codemirror

reactjs

react-codemirror

反应 onChange 方法不是来自组件的运行