再次按回车点击按钮

Question

I have this button that I click to print a document. but the issues is it stays in focus I think and if I press enter key by mistake it prints it again {basically the button is getting pressed again on enter key. I am already using e.preventDefault() so I don't know why it is doing it. Is it possible to remopve this behaviour?

Basically I only want handleOrderPrint() to run on click and not when Enter key is pressed.

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

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

Edit----------------> Already tried this:

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>

Answer 1

Add the onKeyPress handler and check if Enter key is pressed. Use 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>

Answer 2

I believe you can use printed as button disable trigger

 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>)

Edited

How about using 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>)