如何从react.js中的状态中删除部分数据

发布于 2025-01-10 11:13:45 字数 1110 浏览 2 评论 0原文

我创建一些数据并将其添加到我的 selecetFile2 状态/然后我想通过任何事件删除该 selecetFile2 状态的某些部分 - 只是功能指南。

const [selectedFile2, setSelectedFile2] = useState([]); //my state for data
const [isFilePicked2, setIsFilePicked2] = useState(false); //just controll for page

这个控制数据的函数

    const changeHandler2 = (event) => {
       setSelectedFile2([...selectedFile2,event.target.files[0]]);
       setIsFilePicked(true);}

    const multi_img = ()=>{ //It's for input dialog box
        document.getElementById("multi_img").click();}

是我的主要代码

     <input type="file" onChange={changeHandler2} title="ali ali"  id="multi_img" 
        name="img" accept="image/*"  style={{display:'none'}} />
        <div><BsFillPlusSquareFill onClick={multi_img} /> //input control by this
        {
            isFilePicked2 &&
                selectedFile2.map(item => <img key={v4()} src={URL.createObjectURL(item)} />)
          //this my Item I want to delete for example by click
          //I just need function
        }

原文

I create and add some data to my selecetFile2 state / then I want to delete some part of that selecetFile2 state by any event- just guide for function.

const [selectedFile2, setSelectedFile2] = useState([]); //my state for data
const [isFilePicked2, setIsFilePicked2] = useState(false); //just controll for page

this function for control data

    const changeHandler2 = (event) => {
       setSelectedFile2([...selectedFile2,event.target.files[0]]);
       setIsFilePicked(true);}

    const multi_img = ()=>{ //It's for input dialog box
        document.getElementById("multi_img").click();}

this my main code

     <input type="file" onChange={changeHandler2} title="ali ali"  id="multi_img" 
        name="img" accept="image/*"  style={{display:'none'}} />
        <div><BsFillPlusSquareFill onClick={multi_img} /> //input control by this
        {
            isFilePicked2 &&
                selectedFile2.map(item => <img key={v4()} src={URL.createObjectURL(item)} />)
          //this my Item I want to delete for example by click
          //I just need function
        }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天气好吗我好吗 2025-01-17 11:13:45

干得好

 <input
      type="file"
      onChange={changeHandler2}
      title="ali ali"
      id="multi_img"
      name="img"
      accept="image/*"
      style={{ display: "none" }}
    />
    <div>
      <BsFillPlusSquareFill onClick={multi_img} /> //input control by this
      {
        isFilePicked2 &&
          selectedFile2.map((item) => (
            <img key={v4()} src={URL.createObjectURL(item)} onClick={ () => {
              setSelectedFile2(selectedFile2.filter(i => i !== item))
            }} />
          ))
        //this my Item I want to delete for example by click
        //I just need function
      }
    </div>

Here you go

 <input
      type="file"
      onChange={changeHandler2}
      title="ali ali"
      id="multi_img"
      name="img"
      accept="image/*"
      style={{ display: "none" }}
    />
    <div>
      <BsFillPlusSquareFill onClick={multi_img} /> //input control by this
      {
        isFilePicked2 &&
          selectedFile2.map((item) => (
            <img key={v4()} src={URL.createObjectURL(item)} onClick={ () => {
              setSelectedFile2(selectedFile2.filter(i => i !== item))
            }} />
          ))
        //this my Item I want to delete for example by click
        //I just need function
      }
    </div>

回复收藏 0 原文

我不吻晚风 2025-01-17 11:13:45

通过使用useState，您不能直接更新或修改状态。每当您想要修改或更新状态时，您都必须使用 set[nameofstate] 来完成。就你而言。
每当您想要更新 selectedFile2 时，您都必须将 seletedFile2 的新值传递给 setSelectedFile2(newValueForSelectedFile2)。
有关更多信息和示例，请访问文档