使用按钮 onClick 删除 li 项目答案

【问题标题】：Removing li items with Button onClick使用按钮 onClick 删除 li 项目
【发布时间】：2021-06-16 12:45:10
【问题描述】：

我正在尝试向每个 li 添加一个活动的“x”按钮，以便用户可以单击它以从列表中删除 li。我添加了按钮，以便它与每个列表项一起出现，但我不知道单击后需要输入 onClick 以删除相应的 li 。有什么建议吗？

<div>
  <h5 className="col-lg-4 mt-4">Selected Files</h5>
  <ul className="nobull text-sm">
    {files.map((file) => (
      <li key={file.path}>
        <Button className="ml-3" close />
        {file.path} - {(file.size / 1024).toFixed(1)} KB
      </li>
    ))}
  </ul>
</div>

【问题讨论】：

您可能需要添加一个onClick 处理程序，传递一些文件标识符，并将其从files 状态中删除。到目前为止，上述 sn-p 是您尝试过的吗？您能否提供一个更全面的组件代码示例，以便我们了解files 的定义位置以及如何更新它？
你能提供files的值吗？

标签： javascript html reactjs next.js react-dropzone

【解决方案1】：

如果它对任何人有帮助，经过进一步研究，我能够得到答案。我创建了以下常量：

  const remove = file => {
    const newFiles = [...files];     // make a var for the new array
    newFiles.splice(file, 1);        // remove the file from the array
    setFiles(newFiles);              // update the state
  };

然后我更新了我的代码：

<div>
  <h5 className="col-lg-4 mt-4">Selected Files</h5>
  <ul className="nobull text-sm">
    {files.map((file, i) => (
      <li key={file.path} className="py-2">
        <Button className="ml-3" onClick={() => remove(i)} close />
        {file.path} - {(file.size / 1024).toFixed(1)} KB
      </li>
    ))}
  </ul>
</div>;

【讨论】：

仅供参考，从数组中删除的惯用方法是使用功能更新并过滤数组，即setFiles(files => files.filter((el, i) => i !== index));。

【解决方案2】：

你可以试试这样的：

const handleDelete = (index) => {
    let filesArr = [...files];

    filesArr.splice(index, 1);      // This will delete the element

    // Update the state with this modified array
    setFiles(filesArr);     // like this
}

<div>
  <h5 className="col-lg-4 mt-4">Selected Files</h5>
  <ul className="nobull text-sm">
    {files.map((file, fileIndex) => (           // fileIndex is added here to hold array element index
      <li key={file.path}>
        <Button className="ml-3" close />
        {file.path} - {(file.size / 1024).toFixed(1)} KB
        <button type="button" onClick={() => handleDelete(fileIndex)}
      </li>
    ))}
  </ul>
</div>;

【讨论】：

【解决方案3】：

您可以创建要删除的键数组。

function Files(){
   const [dis, setDis] = useState([]);

   const removeHandler = (key) => {
     setDis(dis.push(key))
   }
   return(
     <div>
       <h5 className="col-lg-4 mt-4">Selected Files</h5>
       <ul className="nobull text-sm">
         {files.map((file, key) => (
           !fruits.includes(key) && (
             <li key={file.path}>
               <Button className="ml-3" close onClick={()={removeHandler(key)}}/>
               {file.path} - {(file.size / 1024).toFixed(1)} KB
              </li>
            )
          ))}
        </ul>
     </div>;
   )
}

【讨论】：

【解决方案4】：

  you could use a function like this  const removeFile = id =>{ const updatedFiles = files.filter(file => file.id !== FileId)
setFiles(updatedFiles)

}

【讨论】：