onSubmit 无法在渲染道具（React）中输入

Question

我需要一个表单内的按钮，当用户按下 Enter 按钮时触发 onSubmit 事件。

这是可行解决方案的示例：

<form onSubmit={() => console.log('ok')}>
  <button type="submit" autoFocus>Submit</button>
</form>

当用户按下 Enter 时，onSubmit 被正确触发。

我的问题是当我必须在组件的渲染道具中渲染这个按钮时：

<Component render={()=> (
  <button type="submit" autoFocus /> // here the button will not be focused
)}/>

所以当我按下 Enter 时，没有任何反应。

有什么方法可以仅使用 html 个属性来获得可行的解决方案吗？

Answer 1

它不起作用，因为在您的示例中按钮 onClick 事件未连接到 GoogleLogin 或包装 Component.

一步一步：

由于 autoFocus，当您的按钮呈现时它会自动聚焦。只要您在 enter 仍处于焦点状态时单击它，就会触发该按钮的单击事件。

在纯 html 示例中，表单的 onSubmit 被触发，因为按钮有一个 type="submit".

<form onSubmit={() => console.log('ok')}>
  <button type="submit" autoFocus>Submit</button>
</form>

因此，如果您希望您的示例在单击 enter 时触发 GoogleLogin，您必须在单击按钮时通过道具手动触发它：

  <GoogleLogin
render={(renderProps) => (!renderProps.disabled ?
  <button  autoFocus onClick={renderProps.onClick}>
    This is my custom Google button
  </button>: null
)}
  />

请记住，如果用户单击 Tab，自动对焦将丢失并且 enter 输入将不再触发 onClick 事件。

相反，您可以设置一个事件侦听器，它将侦听 enter 输入并在呈现时触发 GoogleLogin，与 autoFocus 无关。或者您让您的用户单击该按钮而不是输入。

onSubmit 无法在渲染道具（React）中输入

onSubmit not working on enter in render props (React)

javascript

forms

onsubmit

reactjs