0

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

1 回答 1

2

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

于 2020-08-17T14:54:20.547 回答