在“Enter”键上发送数据 - React答案

【问题标题】：Send data on key 'Enter' - React在“Enter”键上发送数据 - React
【发布时间】：2021-07-05 13:58:20
【问题描述】：

当我按下 Enter 时，我正在尝试发送我的 fieldset，但我的函数没有返回我的 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')
        }
    }

为什么我的console.log 在我的页面上按回车键没有响应？

【问题讨论】：

把它放在表单本身或者只是在挂载时添加一个事件监听器，记得在卸载时通过在 useEffect 中返回断开连接来删除它

标签： javascript reactjs events components

【解决方案1】：

你快到了，只需将 onKeyPress 替换为 onKeyDown 即可。

对于回车，keyCode 将返回 13。所以你可以

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

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

【讨论】：

onKeyDown 需要所有键，不是吗？

【解决方案2】：

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

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

...

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

当你按下回车键时会起作用;)

【讨论】：

我有希望，但它不起作用哈哈。当我点击我的<i><i/> 时，它可以工作。当我按 Enter 时，什么也没有发生?
专注于输入？