反应 - 如何转换A＆lt; div＆gt;输入

Question

我有一个表，每行都有一些td此处的2 td对我很重要，我想更改它们：name＆amp ; family。 我想更改每个名称或family td当用户单击时。 我该如何处理此活动？

这是我的表td：

finalList.map((i, index) => {
  return (
    <tr className="contactItem" id={i.id} key={i.id}>
      <td>{String(index + 1).padStart(2, "0")}).</td>
      <td id="editName" onClick={(e) => inlineEditHandler(e, i.name)}>{i.name}</td>
      <td id="editFamily" onClick={(e) => inlineEditHandler(e, i.family)}>{i.family}</td>
      <td>
        {String(i.numbers[0]).substring(7, 11) +
          "***" +
          String(i.numbers[0]).substring(0, 4)}
      </td>
      <td className="itemBTNS">
        <button
          className="deleteBTN"
          onClick={() => contactDeleteHandler(i.id)}
        >
          X
        </button>
        <button
          className="editBTN"
          onClick={() => contactEditHandler(i)}
        >
          Edit
        </button>
      </td>
    </tr>
  );
})

我想为第二和第三td设置此事件。 并请注意，我不想使用contendeedible属性。

  inlineEditHandler = (e, i) => {
    this.setState({
      [e.target.id]: i,
    });
  };

editname和editfamily是我的状态。 我应该在InlineDithandler函数或其他内容中做什么，以将tagName从td更改为输入或类似的内容？