Estoy creando aquí una tabla dinámica, y estoy tratando de editar el contenido de td al hacer clic en el botón de edición, por lo que estoy configurando contentEditable verdadero para cada td al hacer clic en el botón de edición respectivo, ahora quiero agregar enfoque usando useRed, pero el enfoque dinámico no funciona, me refiero a otros problemas también en el flujo de acumulación, pero nada funcionó.
import react from "react"; import { useEffect, useState, useRef } from "react"; export const Table = (props) => { const [contentEditableMode, setContentEditableMode] = useState(false) const [contentEditableId, setContentEditableId] = useState(null); const editTd = (e, id) => { console.log(e.target); console.log(id); setContentEditableMode(!contentEditableMode); setContentEditableId(id); } useEffect(() => { }, [contentEditableMode]) return (<div><table> <thead> <tr> <td>ID</td> <td>Title</td> <td style={{ "paddingRight": "20px" }}>Edit</td> <td>Delete</td> </tr> </thead> <tbody> {props.tableData && props.tableData.map((row, ind) => { return ( <tr key={row.id}> <td>{row.id}</td> <td contentEditable={contentEditableId === row.id ? contentEditableMode : null} suppressContentEditableWarning='true'>{row.title}</td> <td style={{ "paddingRight": "20px", "cursor": "pointer" }} onClick={(e) => { editTd(e, row.id) }}>Edit</td> <td style={{ "cursor": "pointer" }} onClick={() => props.deleteRowData(row.id)}>Delete</td> </tr>) })} </tbody> </table> </div>) }Aquí le doy solo un ejemplo, cómo puede usar useRef para enfocarse en la cola de edición, si desea useRef en el map , debe ser único en los valores de referencia, debe agregarse y cuando haga clic en la línea de edición, el estado será verificado para ver si la identificación existe en focusRef , luego debe verificar la consola y verificar si existe el atributo de enfoque. Si tiene un atributo de enfoque, puede agregar el enfoque a la línea de edición. Gracias
import React, {useRef} from "react"; import { useEffect, useState, useRef } from "react"; export const Table = (props) => { const focusRef = useRef([]); const [contentEditableMode, setContentEditableMode] = useState(false) const [contentEditableId, setContentEditableId] = useState(null); const editTd = (e, id) => { if (focusRef.current && focusRef.current[id]) { console.log(focusRef.current[id]) //focusRef.current[id].focus(); } console.log(e.target); console.log(id); setContentEditableMode(!contentEditableMode); setContentEditableId(id); } useEffect(() => { }, [contentEditableMode]) return (<div><table> <thead> <tr> <td>ID</td> <td>Title</td> <td style={{ "paddingRight": "20px" }}>Edit</td> <td>Delete</td> </tr> </thead> <tbody> {props.tableData && props.tableData.map((row, ind) => { return ( <tr key={row.id}> <td>{row.id}</td> <td contentEditable={contentEditableId === row.id ? contentEditableMode : null} suppressContentEditableWarning='true'>{row.title}</td> <td ref={ref => (focusRef.current[row.id] = ref)} style={{ "paddingRight": "20px", "cursor": "pointer" }} onClick={(e) => { editTd(e, row.id) }}>Edit</td> <td style={{ "cursor": "pointer" }} onClick={() => props.deleteRowData(row.id)}>Delete</td> </tr>) })} </tbody> </table> </div>) }