如何正确捕获 React.js 中文本输入的 change/focus usOut 事件？

我有一个表单，其中我想在文本输入上处理 改变事件，但是在 放下钥匙上反应 改变触发(与本机 JS 相反，当输入字段为 模糊不清时触发 改变事件)。

有 做出反应可以做我想做的事吗？

227507 次浏览
小开
最佳答案

如果只想在输入失去焦点时触发验证，可以使用 在 Blur 上。

React 使用 onFocus 和 onBlur 而不是 onFocusIn 和 onFocusOut。所有 React 事件都标准化为冒泡，因此 React 不需要/支持 onFocusIn 和 onFocusOut。2

小开

虽然已经很晚了，但是这并不值得你浪费时间，因为在浏览器级别上焦点和焦点事件的实现以及对焦点和模糊的综合反应还是有一些区别的。聚焦和聚焦实际上是泡沫，而在聚焦和模糊不。所以到目前为止，还没有完全相同的实现用于关注和关注，用于反应。不管怎样，大多数情况都会在 Focus 和 Blur 中得到报道。

小开

您需要小心，因为 onBlur在 IE11(如何在 IE 中使用 relatedTarget (或等价物) ？，https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget)中有一些警告。

然而，就我所知，还没有办法在 React 中使用 onFocusOut。如果需要更多信息，请查看他们的 github https://github.com/facebook/react/issues/6410上的问题。(请参阅下面的更新)

更新:

截至反应17，事件已被更新-见 使用 focus/focus out for onFocus/onBlur 的公关。 然而，正如 列出破坏性变化的页面所提到的:

虽然 React 17在 onFocus 事件中从焦点转移到了底层焦点，但是注意这并没有影响冒泡行为。在 React 中，onFocus 事件总是冒泡，并且在 React 17中继续冒泡，因为通常它是一个更有用的默认值。查看这个沙箱，了解您可以为不同的特定用例添加的不同检查。

小开

JavaScript = > React

Onfocus out = > onBlur

聚焦 = > 聚焦

小开

在我的例子中，我希望输入在我完成写入新值时被提交，所以在 onBlur中我做了 fetch调用:

<Form.Control
placeholder={i.stock}
type="text"
id={"inputID"}
onBlur={
(event) => {
if (confirm("Do you want to update stock of " + i.label + " to " + event.target.value) == true) {
fetch(REACT_APP_REST + "/product/" + i._id, {
method: 'PATCH',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({ stock: event.target.value })
}).then(res => res.json())
.then(res => {
toast("the stock of" + i.label + "has been updated");
getData();
console.log(res)
});
} else {
alert("You canceled!")
}
}
}
></Form.Control>
小开

试试这个事件在反应，它为我工作。 在鼠标离开()。 如果 onBlur ()和 onFocusOut 不适合您，请使用此选项。


提交答案