有条件地在地图内渲染输入

约瑟夫·伯纳德

我有一个任务列表，里面有另一个任务（子任务）。我使用地图列出所有任务，并有一个按钮可以向该任务添加更多子任务。除非按下按钮，否则输入按钮应该是不可见的。问题是我使用 useState 挂钩有条件地呈现输入，但是每当我单击任何按钮时，所有任务的输入都会打开，并且应该只打开来自该特定索引的输入。

const Task = () => {
  const [openTask, setOpenTask] = useState(false);

  return task.map((item, index) => {
    return (
      <div>
        <button onClick={() => setOpenTask(!openTask)}>Add</button>
        {item.name}
        {openTask && <input placeholder="Add more tasks..."/>}
        {item.subTask.map((item, index) => {
          return (
            <>
              <span>{item.name}</span>
            </>
          );
        })}
      </div>
    );
  });
};

甘地先生

尝试使用数组

const Task = () => {
    const [openTask, setOpenTask] = useState([]);
  
    const openTaskHandler = (id) => {
        setOpenTask([id])
    }
    return task.map((item, index) => {
      return (
        <div>
          <button onClick={() => openTaskHandler(item.id)}>Add</button>
          {item.name}
          {openTask.includes(item.id) && <input placeholder="Add more tasks..."/>}
          {item.subTask.map((item, index) => {
            return (
              <>
                    <span>{item.name}</span>
              </>
            );
          })}
        </div>
      );
    });
  };