如何使用索引来识别被点击的待办事项？

大卫·扎戈尔斯基

基本上我需要删除一个被单击的ToDo，但是因为ToDo没有唯一的ID，所以它删除了所有的ID。我尝试了UUIDV4，但是我没有将其添加到每个ToDo中

App.js

class App extends Component {
  state = {
    input: "",
    todo: [],
    completed: false
  };

  handleRemove = (id) => {
    const remove = this.state.todo.filter((todo) => 
    todo.key !== id.key);
    this.setState({todo: remove});
  }

...
 <TodoList 
          todo={this.state.todo}
          rmv={this.handleRemove}
        />

待办事项清单

const TodoList = ({todo, rmv}) => {
    const todoBuild = todo.map((todo, index) => (
      <Todo 
        todo={todo} 
        key={index} 
        rmv={rmv}/>
    ))
    return <div> {todoBuild} </div>
};

一切

const Todo = ({todo, rmv}) => {
    return (
        <div className='todo'>
            <p>{todo}</p>
            <button className='btn-rmv' onClick={() => rmv (todo)}>x</button>
        </div>
    )
}

Src

数组是有序结构，因此您可以依赖项目索引，即使在序列化/反序列化之后，该索引也将保持不变。

注意（由于@devserkan）：...如果使用嵌套数组，本示例中使用的Spread运算符（）会创建数组的浅表副本-请splice修改原始数组（这是您永远都不想做的）。请使用方法创建数组的深层副本（JSON.parse(JSON.stringify(...))lodash库方法等）或用代替splice函数Array.filter。

删除功能

handleRemove = (id) => {
    let todo = [...this.state.todo]
    todo.splice(id, 1);
    this.setState({todo});
  }

待办事项清单

const TodoList = ({todo, rmv}) => {
    const todoBuild = todo.map((todo, index) => (
      <Todo 
        itemIndex={index}
        todo={todo} 
        key={index} 
        rmv={rmv}/>
    ))
    return <div> {todoBuild} </div>
};

一切

const Todo = ({todo, rmv, itemIndex}) => {
    return (
        <div className='todo'>
            <p>{todo}</p>
            <button className='btn-rmv' onClick={() => rmv(itemIndex)}>x</button>
        </div>
    )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。