在键 'Enter' 上发送数据 - React

Question

我正尝试在按 Enter 时发送我的 fieldset，但我的函数没有 return 我的 console.log

这是我的组件的一个片段：

{formIncomes === false && (
                        <div className="text-left flex justify-items-center relative">
                            <form onSubmit={handleAddIncome} className="m-auto">
                                <label htmlFor="newIncomeName"></label>
                                <input className="w-38 bg-gray-50 shadow-inner italic p-1 m-1 text-gray-500 text-xs" id="newIncomeName"
                                    name="newIncomeName"
                                    type="text"
                                    value={incomeCall}
                                    onChange={(e) => setIncomeCall(e.target.value)}
                                    onClick={handleClearIncomeCall}
                                />

                                <label htmlFor="newIncomeAmount"></label>
                                <input className="w-38 shadow-inner italic p-1 m-1 text-gray-500 text-xs" id="newIncomeAmount"
                                    name="newIncomeAmount"
                                    type="text"
                                    value={incomeNum}
                                    onChange={(e) => setIncomeNum(e.target.value)}
                                    onClick={handleClearIncomeNum}
                                />
                            </form>
                            <i onClick={handleAddIncome} className="absolute right-0 fas fa-check text-gray-400 hover:text-green-500 text-xs p-1 m-1"></i>
                        </div>
                    )}

这是我的函数：

    const handleKeyPress = (e) => {
        if (e.key === 'Enter') {
            console.log('Enter pressed')
        }
    }

为什么我在页面上按 enter 后 console.log 没有响应？

Answer 1

大功告成，只需将 onKeyPress 替换为 onKeyDown 即可。

对于输入，keyCode 将为 return 13。因此您可以

const handleKeyPress = (e) => {
    if (e.keyCode === 13) {
        console.log('Enter pressed')
    }
}

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

Answer 2

使用<form>并删除此功能！ :)

const handleSubmit = (data) => {
   console.log(data);
};

...

<form onSubmit={handleSubmit}>
   <fieldset>
      <input ... />
      <input ... />
   </fieldset>
   ...
</form>

当您按下 enter 键时将起作用 ;)

在键 'Enter' 上发送数据 - React

Send data on key 'Enter' - React

javascript

events

components

reactjs