开发者问题收集

如何在 react.js 中添加一个从列表中删除项目的按钮

2021-09-13
737

我正在学习 React,我正在制作一个输出列表的输入字段 我想知道如何创建一个函数来清除我输入的列表或从列表中删除特定项目。

let eleValue;
let myItems = [];

let handleChange = (e)=>{
    eleValue = e.target.value;
}

let handleForm = (e)=>{
    e.preventDefault();
    myItems.push(eleValue);
    e.target.elements[0].value = "";
    render()
}

let removeList =()=>{

}

let render = ()=>{
    let ele = (
        <div>
            <form onSubmit={handleForm} action="">
                <input onChange={handleChange} type="text" />
                <input type="submit" />
                <button onClick={removeList}>remove</button>
                <ul>
                {myItems.length? myItems.map((item)=>
                    <li>{item}</li>
                ):''}
            </ul>
            </form>
            
        </div>
    )
    ReactDOM.render(ele, document.getElementById('app'))
}
render();
1个回答

首先,用对象定义内容数组: const myItems = [{id: 1},{id: 2},{id: 3}]

id 用于检查要删除的项目。

有了数组后,您几乎可以使用 javascript 中的 filter 从数组中删除该项目。

Javascript 中的过滤器

// my set of items
const myItems = [
  {id: 1},
  {id: 2},
  {id: 3}
];

// choose the id to delete
const idToDelete = 2;

// new array of items without the item with id 2
const myNewItems = myItems.filter((item) => item.id !== idToDelete);

console.log('old set of items', myItems)
console.log('new set of items', myNewItems )
Coffezilla
2021-09-13