Question

我最近能够按照以下模式删除我的商品：

我在onClick={() => props.onDelete(todo)}中传递了一个函数：

从'react'导入React；

const Todo = props => (
    <div>
       <ul className = "list-group">
       {props.todos.map(todo => {
          return <li className = "list-group-item" key ={todo.id}>{todo.text}<a onClick={() => props.onEdit(todo)}
          className="glyphicon glyphicon-edit" href="#"></a><a onClick={() => props.onDelete(todo)}
          className="glyphicon glyphicon-trash" href="#"></a></li>
        })
      }
    </ul>
      </div>
);

export default Todo;

然后让处理程序执行以下操作：

  handleDelete(todos) {
var prevState = this.state.todos;
for(var i = 0; i< prevState.length; i++){
  if(prevState[i].id == todos.id){
    prevState.splice(i, 1);
  }
}
this.setState({prevState:todos})

}

那很好，并且完成了。但是，现在，我想使用该特定待办事项的新编辑文本来编辑待办事项的todo.text和setState，与我相同能够删除该特定待办事项。

我创建了一个在onClick={() => props.onDelete(todo)}中传递的函数以及一个处理程序，但是在其中，我有效地希望得到能够产生编辑特定待办事项功能的代码

handleEdit(todos) {

  }

如何编辑我的特定待办事项？感谢您的帮助。

Answer 1

编辑待办事项和重构现有的删除处理程序将如下所示：

handleDelete(id) {
  const todos = this.state.todos.filter(todo => todo.id === id);

  this.setState({
    todos
  })
}

// pass updated todo item. 
// if you want just edit 'text', just pass here and object {text: 'new_next'}
handleEdit(editedTodo) {
  const todos = this.state.todos.map(todo => {
    return todo.id === editedTodo.id 
      ? {...editedTodo}
      : _todo
  });

  this.setState({
    todos
  })
}

const Todo = props => (
<div>
   <ul className = "list-group">
   {props.todos.map(todo => {
      return 
      <li>
        <a 
          onClick={() => props.onDelete(todo.id)} // pass actual todo id into handler
          className="glyphicon glyphicon-trash"
        />
        <a 
          onClick={() => props.onEdit(editedTodo)} // pass here edited todo
          className="glyphicon glyphicon-trash"
        />
      </li>
    })
  }
</ul>
  </div>
);

Answer 2

首先，您需要UI来处理编辑的文本。例如，当用户单击“编辑”时，可以使用待办事项文本渲染textarea。

用户编辑文本并单击“保存”按钮，然后更新state。

正在运行的演示：https://codesandbox.io/s/64qkjlk2oz

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: [
                { id: 1, text: 'Buy milk' },
                { id: 2, text: 'Wash car' },
                { id: 3, text: 'Feed dog' }
            ],
            editId: 0,
            editText: ''
        };
    }
    showEdit = (event, todo) => {
        event.preventDefault();
        this.setState({
            editId: todo.id,
            editText: todo.text
        });
    }
    handleSave = () => {
        const { editId, editText } = this.state;
        const todos = [...this.state.todos];
        for (let i = 0; i < todos.length; i++) {
            if (editId === todos[i].id) {
                todos[i].text = editText;
                break;
            }
        }
        this.setState({todos, editId: 0, editText: ''});
    }
    handleChange = event => {
        this.setState({editText: event.target.value});
    }
    render() {
        const { todos, editId, editText } = this.state;
        return (
            <ol>
                {todos.map(todo => {
                    return editId === todo.id
                        ? <li>
                            <textarea onChange={this.handleChange}>{editText}</textarea>
                            <button onClick={this.handleSave}>Save</button>
                        </li>
                        : <li>
                            <span>{todo.text + ' '}</span>
                            <a onClick={e => this.showEdit(e, todo)} href="">Edit</a>
                        </li>
                })}
            </ol>
        );
    }
}

如何在我的状态下编辑特定值？

2 个答案: