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

Question

我有一个任务列表，里面有另一个任务（子任务）。我使用地图列出所有任务，并有一个按钮可以向该任务添加更多子任务。除非按下按钮，否则输入按钮应该是不可见的。问题是我使用 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>
    );
  });
};

Answer 1

那是因为您将所有项目的 openTask 设置为 true。您可以创建对象并将特定 id 存储为 true。例如

const [openTask, setOpenTask] = useState({});

然后在按钮 onClick 上可以设置特定的 id 来打开

setOpenTask({...openTask,[`${item.name}-${index}`]:true});

然后检查特定的 id

{openTask[`${item.name}-${index}`] && <input placeholder="Add more tasks..."/>}

Answer 2

尝试使用数组

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>
      );
    });
  };

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

Conditional rendering an input inside a map

javascript

reactjs