Question

您能帮我找出通过单击按钮添加上一次输入后如何设置焦点吗？

function InputList() {
  const [items, setItems] = useState([]);
  const add = useCallback(() => setItems([...items, {id: uniqId()}]), [items]);

  return (
    <div>
      {items.map(item => <input key={item.id}/>)}
      <button onClick={add} type="button">Add</button>
    </div>
  );
}

Answer 1

最简单的方法是将相同的ref传递给所有input：

const refToLast = React.createRef();
useEffect(() => {
  refToLast.current.focus();
});
...
      {items.map(item => <input ref={refToLast} key={item.id}/>)}
...

但是我们可能会发现我们将焦点设置为每次重新渲染时的最后一个输入（即使我们键入一些值）。因此，只有在更改items.length时，我们才可以添加条件以设置焦点：

useEffect(() => {
  refToLast.current.focus();
}, [items.length]);

但是当我们删除条目不添加它们时，该操作也会运行。不确定是否需要。

[upd]跳过将重点放在初始渲染上的方法，我们可以添加其他标志：

const doSetAutoFocus = useRef(false);

useEffect(() => {
  refToLast.current.focus();
}, [items.length, doSetAutoFocus]);

const onAddClicked = useCallback(() => {
  add();
  doSetAutoFocus.current = true;
}, [add])

Answer 2

您可以使用autoFocus属性和index（地图的第二个参数），

{items.map((item,i) => <input key={item.id} autoFocus={i === items.length - 1 ? true : false}/>)}

Demo

React：添加后如何设置对最后输入的关注？

2 个答案: