Javascript 反应：显示和隐藏列表中的特定元素

以下列表将输入显示为列表的数据

我在列表中的每个元素附近都添加了一个切换，以便可以专门隐藏它

现在，当我点击切换按钮时，整个列表隐藏和显示，而我只想隐藏/显示所选元素。

我尝试设置

setShowurl（！showurl）在
handleChangeUpdate
中，但它不起作用

如何做到这一点

const F = () => {
  const initialList = [
    {
      id: "a",
      title: "Random title 1",
      description: "Random description 1"
    },
    {
      id: "b",
      title: "Random title 2",
      description: "Random description 2"
    },
    {
      id: "c",
      title: "Random title 3",
      description: "Random description 3"
    }
  ];

    const [list, setList] = React.useState(initialList);

// This is the area to update a specific element in the list

    function handleChangeUpdate(id, event) {
    const { name, value } = event.target;
    const newList = list.map((item) => {
      if (item.id === id) {
        const updatedItem = {
          ...item,
          [name]: value
        };

        return updatedItem;
      }
      return item;
    });

    setList(newList);

// This is the area for toggle

  const [showurl, setShowurl] = useState(true);

  const hideComponent = (name) => {
    console.log(name);
    switch (name) {
       case "showurl":
        setShowurl(!showurl);
        break;
      default:
    }
  };
  }

  return (
    <div>
      <ul>
        <div>{showurl && 
          {list.map((item) => (
            <li key={item.id}>
              <label>        
              <input type="checkbox" name="select" onClick={() =>
              {hideComponent("showurl")}}  
               />
               <span />
                </label>
              <input
                name="title"
                className="form-control"
                onChange={(e) => handleChangeUpdate(item.id, e)}
                defaultValue={item.title}
              ></input>
              <input
                name="description"
                className="form-control"
                onChange={(e) => handleChangeUpdate(item.id, e)}
                defaultValue={item.description}
              ></input>
            </li>
          ))}
        }</div>
      </ul>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <F />,
  rootElement
);

const F=（）=>{
常量初始值列表=[
{
id:“a”，
标题：“随机标题1”，
描述：“随机描述1”
},
{
id:“b”，
标题：“随机标题2”，
描述：“随机描述2”
},
{
id:“c”，
标题：“随机标题3”，
描述：“随机描述3”
}
];
const[list，setList]=React.useState（initialList）；
//这是更新列表中特定元素的区域
函数handleChangeUpdate（id，事件）{
常量{name，value}=event.target；
const newList=list.map（（项）=>{
如果（item.id==id）{
常量updateItem={
…项目，
[名称]：值
};
返回updateItem；
}
退货项目；
});
设置列表（newList）；
//这是切换的区域
const[showurl，setShowurl]=useState（true）；
常量hideComponent=（名称）=>{
console.log（名称）；
交换机（名称）{
案例“showurl”：
设置showurl（！showurl）；
打破
违约：
}
};
}
返回(

{showurl&&
{list.map（（项）=>(

{hideComponent（“showurl”）}
/>
handleChangeUpdate（item.id，e）}
defaultValue={item.title}
>
handleChangeUpdate（item.id，e）}
defaultValue={item.description}
>

))}
}

);
};
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
我会改变

const[showurl，setShowurl]=useState（true）

到

const[showurl，setShowurl]=useState（{a:true，b:true，c:true}）

并隐藏基于
showurl[id]
的每个元素首先，您给出的代码中有很多类型错误，
下次确保代码可以运行并且不会崩溃最好的方法是提供沙盒链接

现在：

单击调用该函数的复选框时：

  const hideComponent = (name) => {
        console.log(name);
    switch (name) {
      case "showurl":
        setShowurl(!showurl);
        break;
      default:
    }
  };

如果进行检查，您将看到您正在更改状态
showurl


此状态将呈现整个html部分：

  return (
        <div>
            <ul>
                <div>{showurl &&
                    list.map((item) => ( ...

返回(

{showurl&&
list.map（（项目）=>（。。。

调用该函数时，实际上将该值设置为false，然后不呈现任何内容

因此，您需要做的是：

import React, { useState } from "react";

const initialList = [
  {
    id: "a",
    title: "Random title 1",
    description: "Random description 1"
  },
  {
    id: "b",
    title: "Random title 2",
    description: "Random description 2"
  },
  {
    id: "c",
    title: "Random title 3",
    description: "Random description 3"
  }
];

export default function Test() {
  const [list, setList] = React.useState(initialList);
  const [showurl, setShowurl] = useState(true);


  function handleChangeUpdate(id, event) {
    const { name, value } = event.target;
    const newList = list.map((item) => {
      if (item.id === id) {
        const updatedItem = {
          ...item,
          [name]: value
        };

        return updatedItem;
      }
      return item;
    });

    setList(newList);
  }

  const hideComponent = (name, id) => {
        console.log(name);
    switch (name) {
      case "showurl":
                const newList = list.filter(item => item.id !== id)
        setList(newList);
        break;
      default:
    }
  };

  return (
        <div>
            <ul>
                <div>{showurl &&
                    list.map((item) => (
                        <li key={item.id}>
                            <label>
                                <input type="checkbox" name="select" onClick={() => { hideComponent("showurl",item.id) }}
                                />
                                <span />
                            </label>
                            <input
                                name="title"
                                className="form-control"
                                onChange={(e) => handleChangeUpdate(item.id, e)}
                                defaultValue={item.title}
                            ></input>
                            <input
                                name="description"
                                className="form-control"
                                onChange={(e) => handleChangeUpdate(item.id, e)}
                                defaultValue={item.description}
                            ></input>
                        </li>
                    ))
                }</div>
            </ul>
        </div>
  );
}


import React，{useState}来自“React”；
常量初始值列表=[
{
id:“a”，
标题：“随机标题1”，
描述：“随机描述1”
},
{
id:“b”，
标题：“随机标题2”，
描述：“随机描述2”
},
{
id:“c”，
标题：“随机标题3”，
描述：“随机描述3”
}
];
导出默认函数测试（）{
const[list，setList]=React.useState（initialList）；
const[showurl，setShowurl]=useState（true）；
函数handleChangeUpdate（id，事件）{
常量{name，value}=event.target；
const newList=list.map（（项）=>{
如果（item.id==id）{
常量updateItem={
…项目，
[名称]：值
};
返回updateItem；
}
退货项目；
});
设置列表（newList）；
}
常量hideComponent=（名称，id）=>{
console.log（名称）；
交换机（名称）{
案例“showurl”：
const newList=list.filter（item=>item.id！==id）
设置列表（newList）；
打破
违约：
}
};
返回(

{showurl&&
list.map（（项目）=>(

{hideComponent（“showurl”，item.id）}
/>
handleChangeUpdate（item.id，e）}
defaultValue={item.title}
>
handleChangeUpdate（item.id，e）}
defaultValue={item.description}
>

))
}

);
}

我所做的：
在
hideComponent
函数中，我添加了另一个参数get the row id
然后我构建了一个新列表，没有id为X的行

编辑：

我还更改了渲染函数中的输入元素。请看它
很抱歉列表不起作用，我有一个非常大的组件，我试图尽我所能简化我的列表，所以我的列表很糟糕。无论如何，我尝试了你的参数，我有以下错误
行233:57:“id”未定义无未定义
。我还看到你删除了
setShowurl（！showurl）；
，我不知道它是否会影响，只是以防万一。您是否更改了{hideComponent（“showurl”，item.id）}}它正在工作！！你没有提到要更改输入，所以我没有注意。非常感谢这对我来说意义重大。我浪费了这么多时间试图找出哪里出了问题。我会更改它，谢谢你的通知，很高兴帮助你！那些“id”例如，我将使用complexe ID，因此您的方法不实用，但很简单。