时间戳

首页 > 解决方案 > 再次按回车点击按钮

javascript - 再次按回车点击按钮

问题描述

我有这个按钮，我单击它来打印文档。但问题是我认为它保持焦点，如果我错误地按下回车键，它会再次打印{基本上按钮再次按下回车键。我已经在使用 e.preventDefault() 所以我不知道它为什么这样做。是否有可能消除这种行为？

基本上我只希望 handleOrderPrint() 在点击时运行，而不是在按下 Enter 键时运行。

<Button onClick={e => handleOrderPrint(e)} type="primary">Print</Button>}

 const handleOrderPrint = (e: any) => {
    e.preventDefault();
    ipcRenderer.send('generatePickingDocs', order);
    setPrinted(true);
  };

编辑----------------> 已经尝试过这个：

const btnEl = React.useRef(null);
  const handleOrderPrint = (e: any) => {
    e.preventDefault();
    if (e.keyCode !== 13) {
      console.log("Keycode", e.keyCode);
      ipcRenderer.send('generatePickingDocs', order);
      setPrinted(true);
    }
  };

<Button ref={btnEl} onClick={e => handleOrderPrint(e)} type="primary">Print</Button>

标签： javascriptreactjs

解决方案

添加onKeyPress处理程序并检查是否Enter按下了键。使用Event.preventDefault().

const { useRef, useEffect } = React;

const App = (props) => {
  const ref = useRef();

  // set focus to button for testing
  useEffect(() => ref.current.focus(), []);

  const print = msg => console.log(msg);

  const handleClick = e => print('Printing...');

  const handleKeyPress = e => {
    if (e.key === 'Enter') {
      e.preventDefault();
      return;
    }
  }

  return (
    <div>
      <button
        ref={ref}
        onKeyPress={handleKeyPress}
        onClick={handleClick}
      >
        Print
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

推荐阅读