React>使用react-table添加新行后如何在输入字段上设置焦点
Tai Le
我决定使用它react-table来构建网格。
拥有更好的UI只是一件事，那就是我想在单击添加新按钮后专注于新项的输入字段。
我打算使用ref但不知道如何fowardRef处理子项
这是我使用react-table的示例：
https://codesandbox.io/s/beautiful-proskuriakova-lpfxn
在这种情况下，我想First Name在添加新行之后专注于该领域。
更新：通过使用autoFocus本机HTML的支持，我可以专注于输入。
答案在这里
但是我仍然想通过使用 React Ref
穆罕默德·瓦吉（Mohamed Wagih）
我用平JavaScript原来达到你的目标
const setFocus = () => {
//Add id to the table
document.getElementsByTagName("TABLE")[0].setAttribute("id", "mytable");
//table > tbody > tr (latest added row) > td (first cell in the row) > input
let cell = document.getElementById("mytable").lastElementChild
.lastElementChild.firstElementChild.children[0];
cell.focus();
};
const addNew = () => {
setData(old => [...old, {}]);
window.requestAnimationFrame(setFocus);
};
我requestAnimationFrame之所以使用它是因为我正在处理DOM，请查看此答案以获取更多详细信息。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用React将焦点放在动态添加的字段上
- 2
使用 React 添加/删除输入字段
- 3
React：添加后如何设置对最后输入的关注？
- 4
在Webpack上使用React
- 5
如何使用React设置Eslint
- 6
使用refs.x.getDOMNode.focus将焦点设置在react-bootstrap.Input字段上
- 7
如何在WebWorker上使用React组件
- 8
输入字段在 React 中失去焦点
- 9
使用React JS的输入范围
- 10
使用 React 在输入时提交
- 11
使用React钩子清除输入字段
- 12
使用React相互更新输入字段
- 13
如何使用React正确设置react-router-dom链接
- 14
在React 17.0.1上使用SVG
- 15
如何在React.net中使用react-router
- 16
如何在React中使用React Router检测路由变化？
- 17
如何在React Native中使用React.forwardRef（）
- 18
如何在React的React Testing库中使用Root Import？
- 19
如何在react中正确使用react-error-boundary？
- 20
如何在React中使用React Router检测路由变化？
- 21
如何使用React TransitionMotion willEnter（）
- 22
如何使用react require语法？
- 23
如何使用React.usecallback？
- 24
如何使用React-Router
- 25
如何使用React映射数组
- 26
如何使用react创建可重用的输入字段？
- 27
我如何使用react获取文本输入字段的值
- 28
如何使用react获取动态创建的输入字段的值
- 29
如何通过输入字段使用 React JS 更新 Highcharts
我来说两句