我正在嘗試構建一個 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>        );    }};