再次按回车点击按钮答案

【问题标题】：Pressing enter clicks button again再次按回车点击按钮
【发布时间】：2020-09-21 15:59:45
【问题描述】：

我有这个按钮，我可以单击它来打印文档。但问题是我认为它保持焦点，如果我错误地按下回车键，它会再次打印它{基本上按钮再次按下回车键。我已经在使用 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>

【问题讨论】：

也许您应该在其事件处理程序中禁用该按钮，或者将焦点移至另一个控件。

标签： javascript reactjs

【解决方案1】：

添加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>

【讨论】：

按回车时仍在进行中
已更新。使用preventDefault()。
仍然是同样的问题，由于某种原因，当您在按钮上按 Enter 时会触发点击事件，当您使用 console.log(e.key) 时，它会给您未定义。
你运行了 sn-p 吗？按Enter 不会显示“正在打印...”。代码使用onKeyPress。但是单击会显示“正在打印...”
我在 ``` useEffect(() => ref.current.focus(), []); ```无法读取未定义的属性“焦点”

【解决方案2】：

我相信您可以使用printed 作为按钮禁用触发器

 const [printed, setPrinted] = React.useState(false); 
 const handleOrderPrint = (e: any) => {
        e.preventDefault();
        ipcRenderer.send('generatePickingDocs', order);
        setPrinted(true);
      };
 return (
 <Button disabled={printed} onClick={e => handleOrderPrint(e)} type="primary">Print</Button>)

已编辑

用ref怎么样

 const [printed, setPrinted] = React.useState(false); 
 const btnEl = React.useRef(null);
 const handleOrderPrint = (e: any) => {
        e.preventDefault();
        btnEl.blur();
        ipcRenderer.send('generatePickingDocs', order);
        setPrinted(true);
      };
 return (
 <Button ref={btnEl} onClick={e => handleOrderPrint(e)} type="primary">Print</Button>)

【讨论】：

我需要再次打印的能力。
不，仍然通过。按钮仍处于焦点状态，所以也许我需要在一秒钟后移除焦点