React中div的contentEditable设为true时如何自动聚焦该元素？

问题原因 #

• 你调用e.focus()的对象是点击事件绑定的图标div，不是需要聚焦的可编辑div，自然不存在对应focus操作
• React的状态更新是异步批量执行的，执行setisUpdating(true)后并不会立即更新DOM，此时可编辑区域的contentEditable属性还未变为true，即使拿到正确元素直接聚焦也不会生效

解决方法 #

使用useRef绑定可编辑div元素，再通过useEffect监听isUpdating状态的变化，状态切换为true时触发聚焦即可，同时注意React组件返回的JSX只能有一个根节点，你原代码的同级div需要包裹一层：

import React, { useState, useRef, useEffect } from 'react';

const Todo = ({todo}) => {
    const [isUpdating, setIsUpdating] = useState(false)
    // 声明ref绑定可编辑元素
    const editableRef = useRef(null)

    const updateItemHandler = () => {
        setIsUpdating(true);
    }

    // 监听isUpdating变化，状态变为true时聚焦可编辑区域
    useEffect(() => {
        if (isUpdating) {
            editableRef.current?.focus()
        }
    }, [isUpdating])

    return(
        {/* 原代码缺少根节点，这里用Fragment包裹 */}
        <>
            <div onClick={updateItemHandler} className={`fa ${isUpdating ? "fa-check" : "fa-pencil"}`}></div>
            <div id={todo.id}>
                <div 
                    ref={editableRef}
                    suppressContentEditableWarning={true}
                    contentEditable={isUpdating}
                >
                    {todo.value}
                </div>
            </div>
        </>
    )
}

export default Todo;

内容的提问来源于stack exchange，提问作者Evan