javascript - 有没有一种方法可以使用按钮来 react 删除存储在状态中的数组中的项目

Question

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

我尝试使用映射键 ID 将索引连接到删除函数。

只是需要帮助了解我的删除函数应该是什么样子，以及它如何获取它旁边的项目的索引并将其删除。

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 作为参数，而是接受整个项目对象。然而，我正在使用 setState 的功能形式，正如@Hamoghamdi 正确建议的那样

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

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

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

  );
}

顺便说一句，Button 是不完全是按钮的组件的错误命名。然而，最好将其作为功能组件来实现。仅当组件有自己的状态时才使用类组件。