我在一个表中有几个输入字段(每行都有一个输入字段),每个字段都是动态命名的,如下所示:
<table>
<tr>
<td>
<input
key={name}
type="text"
value={label}
name={name}
/>
<span>Edit</span>
</td>
</tr>
</table>
注意,我正在映射某个对象以渲染每个 <td />
包含一个输入字段。
我希望发生的是,当我单击该特定行的“编辑”时,同一行上的输入字段将成为焦点。
我从React文档中看到的是,如果您有一组预定义的输入字段并且您能够执行createRef()
,则如何触发此焦点对于每个字段。
但是,如果您的输入字段是动态呈现的并且可能有 X 个输入字段(取决于所映射的对象),您该怎么做?
最佳答案
您可以创建映射到表中每个项目的多个引用,如下例所示。
const rows = [
{ id: "a", name: "Panel 1" },
{ id: "b", name: "Panel 2" },
{ id: "c", name: "Panel 3" }
];
const refs = useRef(new Map()).current;
return (
<div>
<table>
{rows.map(row => (
<tr>
<td>
<input
label={row.name}
ref={inst =>
inst === null ? refs.delete(row.id) : refs.set(row.id, inst)
}
type="text"
/>
<span onClick={() => refs.get(row.id).focus()}>Edit</span>
</td>
</tr>
))}
</table>
</div>
这是一个link到一个工作沙箱。
关于javascript - 如何自动聚焦于 React 中的特定输入字段(单击另一个元素后)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57666810/