Reactjs 如何仅为特定div（组件）呈现useState值？

我创建了一个包含公式的表格，我希望在

onBlur

时从每个单元格显示公式的结果，并在

onFocus

时显示公式本身

• 但问题是，当我单击任何单元格=>时，值为

  25

  的单元格也会受到影响，尽管我希望单元格

  25

  或

  “=age+3”

  仅在精确单击时生效（

  关注它

  ）

import React，{useState}来自“React”；
导入“/styles.css”；
常数表=[
{id:1，行：[“姓名”、“年龄”、“电子邮件”、“公式”]}，
{id:2，第[“阿里”，23，”alisci@yahoo.com“，”=年龄+3”]}，
{id:3，第[“alex”，22，”alexsci@yahoo.com",'22'] }
];
导出默认函数App（）{
const[focused，setFocused]=使用状态（false）；
常数=表[2]。行[1]；
返回(
{table.map（（项，索引）=>(
{item.row.map（（单元格，索引）=>{
返回(
setFocused（true）}
onBlur={（e）=>setFocused（false）}
内容可编辑
键={index}
>
{cell[0]==”&！聚焦？评估（cell.slice（1））：cell}
);
})}
))}
);
}

---

您必须跟踪已聚焦的行并进行比较。这是我的尝试。我已将

表的索引.map

更改为

行索引

，并在条件渲染中检查是否设置了

聚焦

，以及它是否等于

行索引

OnFocus函数将

焦点设置为正确的行索引，onBlur将其设置为空

已解决


聚焦时，我检查单元格是否以
=
开头，然后将innerText转换为
文本
当模糊时，我检查单元格是否以
=
开头，然后我将innterText转换为
eval


import React, { useState } from "react";
import "./styles.css";
const table = [
  { id: 1, row: ["name", "age", "email",'formula'] },
  { id: 2, row: ["Ali", 23, "alisci@yahoo.com", "=age+3"] },
  { id: 3, row: ["alex", 22, "alexsci@yahoo.com",'22'] }
];
export default function App() {
  const [focused, setFocused] = useState(false);
  const age = table[2].row[1];
  return (
    <table className="App">
      {table.map((item, index) => (
        <tr key={index}>
          {item.row.map((cell, index) => {
            return (
              <td
                onFocus={(e) => setFocused(true)}
                onBlur={(e) => setFocused(false)}
                contentEditable
                key={index}
              >
                {cell[0] === "=" & !focused ? eval(cell.slice(1)) : cell}
              </td>
            );
          })}
        </tr>
      ))}
    </table>
  );
}


  onFocus={(e) => cell[0] === "=" && (e.target.innerHTML = cell)}
                onBlur={(e) =>
                  cell[0] === "=" && (e.target.innerHTML = eval(cell.slice(1)))
                }