無法刪除反應中的列表項。錯誤顯示：Uncaught TypeError：無法讀取屬性'刪除'未定義

Question

我正在嘗試製作簡單的待辦事項應用程序。在此我想通過onClick函數從列表中刪除項目。 onClick按鈕返回名爲remove（i）的函數，刪除列表中的項目。但是我收到上面提到的錯誤。 的代碼如下：

import React, { Component } from 'react'; 
import ReactDom from 'react-dom'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 

    constructor(){ 
    super(); 
    this.state={ 
     todo:[] 
    }; 
    }; 

    entertodo(keypress){ 
    var todo=this.refs.newtodo.value; 
    if(keypress.charCode == 13) 
    { 
     this.setState({ 
     todo: this.state.todo.concat(todo) 
     }); 
     this.refs.newtodo.value=null; 
    }; 
    }; 
    todo(data,i){ 
    return (
     <li key={data.id} index={i}> 
     <input type="checkbox"className="option-input checkbox"/> 
     <div className="item"> 
     {data} 
     <button onClick={this.remove.bind(this)}className="destroy"></button> 
     </div> 

     </li> 
    ); 
    }; 
    remove(i){ 
    var todo=this.refs.newtodo.value; 
    var deletetodo=this.state.todo.concat(todo) 
    deletetodo.splice(i,1); 
    this.setState({todo:deletetodo}) 
    }; 

    render() { 

    return (
     <div> 
     <div className="lines"></div> 
     <div> 
     <input type="text" ref= "newtodo" onKeyPress={this.entertodo.bind(this)}className="inputext"placeholder='todos'/> 
     </div> 
     <div className="app"> 

     <ul> 
     {this.state.todo.map(this.todo.bind(this))} 

     </ul> 
     </div> 
     </div> 
    ); 
    } 
} 

export default App; 

同樣的問題出現了，如果我嘗試調用一個函數用於對複選框後單擊strikeoff列表項。需要幫忙。

Answer 1

你需要綁定你的todo和remove函數，還需要splice your todo數組正確。當你的ref new沒有定義，獨特的，你不能訪問值，因此僅僅通過指數

class App extends React.Component { 
 

 
    constructor(){ 
 
    super(); 
 
    this.state={ 
 
     todo:[] 
 
    }; 
 
    }; 
 

 
    entertodo(keypress){ 
 
    var todo=this.refs.newtodo.value; 
 
    if(keypress.charCode == 13) 
 
    { 
 
     this.setState({ 
 
     todo: this.state.todo.concat(todo) 
 
     }); 
 
     this.refs.newtodo.value=null; 
 
    }; 
 
    }; 
 
    todo = (data,i) => { 
 
    return (
 
     <li> 
 
     <input type="checkbox"className="option-input checkbox"/> 
 
     <div key={data.id} className="item"> 
 
     {data} 
 
     <button onClick={this.remove.bind(this, i)}className="destroy">Delete</button> 
 
     </div> 
 

 
     </li> 
 
    ); 
 
    }; 
 
    remove = (i) =>{ 
 
    var deletetodo = {...this.state.todo}; 
 
    this.state.todo.splice(i,1); 
 
    this.setState({todo:this.state.todo}) 
 
    }; 
 

 

 
    render() { 
 

 
    return (
 
     <div> 
 
     <div className="lines"></div> 
 
     <div> 
 
     <input type="text" ref= "newtodo" onKeyPress={this.entertodo.bind(this)}className="inputext"placeholder='todos'/> 
 
     </div> 
 
     <div className="app"> 
 

 
     <ul> 
 
     {this.state.todo.map(this.todo)} 
 

 
     </ul> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>,document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 

 
<div id="app"></div>