React 如何在 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 抛出一个 error/said 焦点不是这里的函数。

有什么方法可以在我将 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（参考）可能对你有帮助

React 如何在 contentEditable 设置为 true 时聚焦 div？

React how to focus div when contentEditable is set to true?

javascript

reactjs

react-hooks

contenteditable

setfocus