reactjs - 如何使用 React 将焦点设置在动态添加的字段上

Question

我有一个基本的任务列表应用程序，让用户能够将项目添加到任务列表。单击“添加项目”按钮后，我将在列表底部插入一个新行。该行包含一个空文本字段，用户可以在其中输入他们的任务名称。我想在它被 push() 编入数组后立即将焦点设置在该字段上。如果字段已经存在，我知道如何使用 ref 设置焦点，但我似乎无法弄清楚动态添加的字段。我该怎么做？

这是我的代码:

const tasks = [array_of_task_objects];
const [state, setState] = React.useState({tasks: tasks});
const newTask = {title: ''};

const addTask = () => {
    let newTasks = [...state.tasks];
    newTasks.push(newTask);
    setState({...state, tasks: newTasks});
    // Now, set focus in the input field...(how?)
};

其他地方:

<button onClick={addTask}>Add Task</button>

<ul>
    {
        state.tasks.map(task => {
            return(
                <li><input value={task.title}></li>
            );
        })
    }
</ul>

Answer 1

实现此目的的一种方法是拥有一个始终引用最后一个文本框的 ref，然后运行一个效果，在 tasks 更新时将焦点设置在最后一个元素上。这是一个示例的外壳，基本上可以让您到达那里:

export default function App() {
  const [tasks, setTasks] = useState([newTask]);
  const lastRef = useRef(null);

  useEffect(() => {
    if (lastRef.current)
      lastRef.current.focus();
  }, [tasks]);

  return (
    <div className="App">
      {tasks.map((task, i) => (
        <>
          <input key={i} ref={i === tasks.length - 1 ? lastRef : undefined} />
          <br />
        </>
      ))}
      <button
        onClick={() => {
          setTasks(tasks => [...tasks, newTask]);
        }}
      >
        Add
      </button>
    </div>
  );
}