Reactjs:以编程方式专注于以编程方式生成的输入

Question

>我有一个应用程序，可以呈现一个可编辑的表格，每行有几个输入元素。由于表中填充了用户条目，因此其长度可以是可变的。表中的某些用户条目将无效。当条目无效时，我希望显示一条警报，指出"您输入了无效数据"，然后将用户集中在具有无效条目的输入上。

通读文档，引用似乎是最好的做事方式。但是，我找到的所有示例，无论是来自 React 团队还是 Stack Overflow，都显示单个输入绑定到单个引用。某些操作(通常单击按钮(被硬编码以引用特定的 ref，并且一切正常。

我想确定在出现错误时访问相关输入的最佳方法。执行此操作的"最佳"方法似乎是创建一个 ref 数组，然后为每个输入分配一个 ref - 但文档也强调要谨慎使用 ref，这感觉就像是对 refs 的严重滥用。

我宁愿做一些事情，比如创建一个 ref，然后将其重新分配给最近更新的任何输入。每次用户失去焦点时，它都会检查是否强制将焦点集中在具有错误数据的输入上。这感觉它有可能成为一种反模式，特别是因为我找不到其他人实现它的任何证据。

我很想知道解决这个问题的最佳方法，因为我担心我的两个想法都不是好的前进道路。

Answer 1

您可以不依赖输入单个引用，而是依赖于容器引用。您始终拥有一个容器 ref，每当用户模糊输入时，您必须使用.querySelectorAll('input')从容器中获取所有输入，找到无效的输入并聚焦它。

const {
useState,
useCallback,
useMemo,
useRef,
useEffect
} = React;
const defaultUsers = [
{ id: 1, name: "User #1", email: "[e-mail]" },
{ id: 2, name: "User #2", email: "[e-mail]" },
{ id: 3, name: "User #3", email: "[e-mail]" },
{ id: 4, name: "User #4", email: "[e-mail]" },
{ id: 5, name: "", email: "[e-mail]" },
{ id: 6, name: "User #6", email: "[e-mail]" },
{ id: 7, name: "User #7", email: "[e-mail]" },
{ id: 8, name: "User #8", email: "" },
{ id: 9, name: "User #9", email: "[e-mail]" },
{ id: 10, name: "User #10", email: "[e-mail]" }
];
const App = () => {
const tbodyRef = useRef();
const focusNextInvalidInput = useCallback(() => {
if (tbodyRef.current) {
const inputs = tbodyRef.current.querySelectorAll("td > input");
for (const input of inputs) {
if (input.value.length === 0) {
input.focus();
return;
}
}
}
}, [tbodyRef]);
useEffect(() => {
focusNextInvalidInput();
}, [focusNextInvalidInput]);
const [users, setUsers] = useState(defaultUsers);
const updateUserField = useCallback(
(id, field, value) =>
setUsers(
users.map(user => (user.id === id ? { ...user, [field]: value } : user))
),
[users]
);
const changeUserName = useCallback(
(id, name) => updateUserField(id, "name", name),
[updateUserField]
);
const changeUserEmail = useCallback(
(id, email) => updateUserField(id, "email", email),
[updateUserField]
);
const usersRows = useMemo(() => {
return users.map(({ id, name, email }) => (
<tr key={id}>
<td>{id}</td>
<td>
<input
type="text"
onChange={e => changeUserName(id, e.target.value)}
value={name}
onBlur={focusNextInvalidInput}
/>
</td>
<td>
<input
type="email"
onChange={e => changeUserEmail(id, e.target.value)}
value={email}
onBlur={focusNextInvalidInput}
/>
</td>
</tr>
));
}, [users, changeUserEmail, changeUserName, focusNextInvalidInput]);
return (
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody ref={tbodyRef}>{usersRows}</tbody>
</table>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

代码沙盒示例。