Question

我正在尝试构建ToDoList应用，并且我有两个组件。我有一个处理状态的主要组件，还有一个按钮组件，它在我呈现的每个任务旁边呈现一个删除按钮。我的问题是，我似乎无法将Delete按钮连接到数组的索引，并无法通过单击按钮旁边的按钮来删除该数组中的特定项目。

我试图通过使用映射键ID将索引连接到删除功能。

我的delete函数的外观以及如何获取其旁边的项目的索引并删除它只是需要帮助。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: '',
      toDoList : []
    }

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.delete = this.delete.bind(this);

  }
  handleSubmit() {
    const itemsArray = this.state.userInput.split(',');
    this.setState({
      toDoList: this.state.toDoList.concat(itemsArray),
      userInput: ''
    });
  }

  handleChange(e) { 
    this.setState({
      userInput: e.target.value
    });
  }

  delete(id) {
    this.setState({
      toDoList: this.state.toDoList.filter( (item) => id !== item.id )
    })
  }


  render() {
    return (
      <div>
        <textarea
          onChange={this.handleChange}
          value={this.state.userInput}
          placeholder="Separate Items With Commas" /><br />
        <button onClick={this.handleSubmit}>Create List</button>
        <h1>My Daily To Do List:</h1>
        <Button toDoList={this.state.toDoList} handleDelete={this.delete} />
      </div>
    );
  }
}; 


class Button extends React.Component {
    constructor(props) {
        super(props);    
    }

    render() {
        return (
            <ul>
                {
                    this.props.toDoList.map( (item) => <li key={item.id}>{item.text}  <button onClick={this.props.delete(item.id)}>Done!</button></li> )
                }
            </ul>

        );
    }
};

Answer 1

我查看了您编辑的代码并进行了一些更改。

我无法通过handleSubmit方法获得您想要实现的目标，但是它添加到列表中的项目是简单的字符串，并且没有您要引用的'id'和'text'属性在其他地方。可能您稍后将对此进行更改，但是当您要做的事情只是字符串时，我已经编辑了您的代码，以使其在这种情况下可以正常工作。

已编辑的delete方法现在不接受item.id作为参数，而是接受整个item对象。但是我使用的是setState的功能形式，正如@Hamoghamdi

所正确建议的那样

delete(itemToDelete) {
    this.setState(state => ({
        toDoList: state.toDoList.filter( (item) => itemToDelete !== item)
    }))
}

render类的已编辑Button方法现在将项目显示为文本并正确绑定了删除处理程序...

render() {
  return (
      <ul>
          {
              this.props.toDoList.map( (item) => <li key={item}>
                  {item}
                  <button onClick={() => this.props.handleDelete(item)}>Done!</button>
                </li> )
          }
      </ul>

  );
}

BTW Button对于不完全是按钮的组件来说是一个不好的名字。不过，最好将其作为功能组件来实现。仅当组件具有自己的状态时，才使用类组件。

Answer 2

您应该尝试将匿名函数与setState()一起使用，而不是直接返回对象文字，特别是当您要执行受先前或当前状态影响的事情时

在this.state内使用setState()不会带来任何好的结果。

在这里，尝试这个：

delete = (id) => {
this.setState((prevState) => { 
return { toDoList: prevState.filter( (task) => id !== task.id )}
});

Answer 3

例如，您需要在构造函数中绑定方法：

constructor(props) {
  //...
  this.handleDelete = this.handleDelete.bind(this)
}

您还可以找到另一种方法的绑定方式

Answer 4

在处理删除项目方面，您可以使用

handleDelete(index) {
   // Use the splice array function: splice(index, deleteCount)
   this.todoList.splice(index, 1);
}

那很容易

有没有一种方法可以使用按钮来删除状态为

4 个答案: