如何获取并显示所选的ul文本以在反应中输入Text

我将在ul文本单击到inputText并使Editable成为可能（这意味着按钮更改为保存以进行编辑）。 除非直接单击其他项目，否则它将被切换。

因此，我尝试通过传递的函数从onClick方法获取ID，然后从setState获取。

在状态下使用id比较单击的ID，如果相等，则将切换showEdit状态。然后编辑按钮以保存按钮。

如果单击其他项，因此id不相等，则其他项名称将进入输入字段。

第一次，单击条目将其加载到输入字段中。

但是问题是如果单击了某个项目，然后又单击了另一个项目，则该按钮已切换，并且输入进行了...

您如何看待我的情况。

这是我的代码

列表组件

const { facils, fetchData } = useDB();
const [id, setId] = useState([]);
const [name, setName] = useState([]);
const [showEdit, setShowEdit] = useState(false);

  const fieldHandler = (id, name) => {
    setId(id);
    setName(name);
  };

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleEdit = (id) => {
    console.log("selected id: ", id);
    facils.map((item) => {
      if (item.id !== id) {
        setShowEdit(!showEdit);
      }

      return item;
    });
  };

return (
facils.map((item) => (
            <Items
              key={item.id}
              items={item}
              fieldHandle={() => fieldHandler(item.id, item.name)}
              handleEdit={() => handleEdit(id)}
            />
...
...
        {showEdit ? (
          <EditField
            id={id}
            name={name}
            handleEdit={() => handleEdit()}
            handleChange={handleChange}
            refreshData={() => fetchData()}
          />
        ) : (
          <CreateField refreshData={() => fetchData()} />

项目组成

const Items = (props) => {
  const { items, fieldHandle, handleEdit } = props;

return (
    <div>
      <ul
        key={items.id}
        onClick={() => {
          fieldHandle(items.id, items.name);
          handleEdit(items.id);
        }}
      >
        {items.id} - {items.name}
      </ul>
    </div>

EditField组件

const { id, name, handleChange, handleEdit, refreshData } = props;
return (
    <div>
     <input type="text" value={name} onChange={handleChange}></input>
     </div>