将 react-codemirror2 与功能组件一起使用

Question

我正在将 react-codemirror2 与功能组件一起使用，我需要从 onKeyDown 事件处理程序内的本地状态访问一个值，但似乎 this 的上下文发生了变化。我不知道有什么方法可以在功能组件中绑定 this 的值，那么如何访问 handleKeyPress 中 input 的值？我只需要使用基于 class 的组件吗？（我的应用程序也使用样式化组件，但在这个问题的上下文中可以忽略这一点。）

const Console = () => {
  const [input, setInput] = useState('');
  
  // has a value here
  console.log('input: ', input);

  const handleKeyPress = (editor, event) => {
    if (event.keyCode === KEY_CODES.ENTER) {
      // empty here
      console.log('input: ', input);
    }
  };

  return (
    <StyledContainer>
      <IconButton disabled={true} icon={<RightOutlined />} />
      <Container>
        <CodeMirror
          value={input}
          options={{
            lineNumbers: false,
            foldGutter: false,
            styleActiveLine: false,
            autofocus: true,
            theme: 'material',
            mode: 'javascript',
          }}
          onBeforeChange={(editor, data, code) => setInput(code)}
          onKeyDown={(editor, event) => handleKeyPress(editor, event)}
        />
      </Container>
    </StyledContainer>
  );
};

Answer 1

我认为有两种选择：

你可以使用 react-codemirror2 作为基于 class 的组件或者

您可以使用 onKeyUp 事件代替 onKeyDown 并像这样获取编辑器的值：

 const handleKeyPress = (editor, event) => {
    if (event.keyCode === KEY_CODES.ENTER) {
    // will return editor value
    console.log('input: ', editor.getValue());
    }
 };

将 react-codemirror2 与功能组件一起使用

use react-codemirror2 with functional component

javascript

codemirror

reactjs