当 contentEditable 设置为 true 时反应如何聚焦 div？

Question

我有一些类似以下的反应代码（最小的可重现示例）：

import React, { useState } from 'react';

const Todo = ({todo}) => {
    const [isUpdating, setisUpdating] = useState(false)

    const updateItemHandler = (e) => {
        setisUpdating(true);
    }

    return(
        <div onClick={updateItemHandler} className={fa ${isUpdating ? "fa-check" : "fa-pencil"}`}></div>
        <div id={todo.id}>
            <div suppressContentEditableWarning={true}
             contentEditable = {isUpdating}>{todo.value}
            </div>
        </div>
    )
}

export default Todo;

当我单击 div 时，它确实将 contentEditable 更改为 true，但我还想同时关注新可编辑的 div。我尝试像这样修改我的 updateItemHandler 函数：

    const updateItemHandler = (e) => {
        setisUpdating(true);
        e.focus();
    }

但是 React 抛出了一个错误/说这里的焦点不是一个函数。

当我将 contentEditable 更改为 true 时，有什么方法可以自动聚焦 div？

谢谢

Answer 1

你可以试试这样的

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

const Todo = ({todo}) => {
    const ref = useRef(null)
    const [isUpdating, setisUpdating] = useState(false)

    const updateItemHandler = (e) => {
        setisUpdating(true);
        ref.current.focus()
    }

    return(
        <div className="row text-center" id={todo.id}>
            <div suppressContentEditableWarning={true}
             contentEditable = {isUpdating} ref={ref}>{todo.value}
            </div>
        </div>
    )
}

export default Todo;

使用 ref（参考）可能会对您有所帮助