لقد اصطدمت بهذه المشكلة وتجاوزتها بالحصول على القيمة من Editor التي تم تمريرها إلى الأمر باستخدام getValue() .

لذلك في حالتك ستغير وظيفة handleSubmit .

const handleSubmit = (editor) => {
  const text = editor.getValue();
  window.alert("You submitted the text: " + text);
};

https://codesandbox.io/s/confident-neumann-99zmk

شكرا على الحل! هذا حل مؤقت مناسب ، لكنه لا يزال لا يحل مشكلة الجذر. لا يجب أن تضطر إلى تمرير كائن المحرر بأكمله إلى الوالد. لا ينبغي أن يقوم مكون محرر Ace بربط أوامرك فقط عند التركيب. إذا قمت بتغيير الأوامر التي يتم تمريرها ، فيجب أن يقوم بتحديث المكون بالأوامر المحدثة الخاصة بك.

الحل الحالي في مكونات الوظيفة هو استخدام useRef وتعيين () => referencedFunction.current() بدلاً من ذلك exec

@ FMS-Cat كيف تحصل على هذا العمل؟ باستخدام المثال التالي الذي جربته ، لا يبدو أنه يعمل كحل؟

function Example() {
    function save() { ... }

    const ref = useRef(save)

    return (
      <AceEditor commands={[
        {
          name: 'save',
          bindKey: {
            win: 'Ctrl-enter',
            mac: 'Cmd-enter',
          },
          exec: () => ref.current(),
        },
      ]}/>
    )
}

حتى يتم إصلاح ذلك ، إليك المزيد من التعليمات البرمجية لاثنين من الحلول التي تمت مناقشتها أعلاه

editor.getValue () [حل منظف]

// `onSave` shouldn't have to pass the content 
// back up the chain since onChange already did that,
// hence calling this a workaround.
function Example({ content, onChange, onSave }) {
  return (
    <AceEditor
      content={content}
      onChange={c => onChange(c)}
      commands={[{
        name: 'save',
        bindKey: { win: 'Ctrl-enter', mac: 'Cmd-enter' },
        exec: editor => onSave(editor.getValue()),
      }]}
    />
  );
}

الاستخدام

function Example({ content, onChange, onSave }) {
  const editor = useRef(null)

  return (
    <AceEditor
      ref={editor}
      content={content}
      onChange={c => onChange(c)}
      commands={[{
        name: 'save',
        bindKey: { win: 'Ctrl-enter', mac: 'Cmd-enter' },
        exec: () => onSave(editor.current.props.value),
      }]}
    />
  );
}