ReactJS如何从列表中删除项目

Question

我有创建<li>元素的代码。我需要通过单击逐个删除元素。对于我有Delete button的每个元素。我知道我需要一些功能删除id的项目。如何做这个功能来删除ReactJS中的元素？ 我的代码：

class TodoApp extends React.Component { 
    constructor(props) { 
     super(props); 
     this.handleChange = this.handleChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
     this.state = {items: [], text: ''}; 
    } 

    render() { 
     return (
      <div> 
       <h3>TODO</h3> 
       <TodoList items={this.state.items} /> 
       <form onSubmit={this.handleSubmit}> 
        <input onChange={this.handleChange} value={this.state.text} /> 
        <button>{'Add #' + (this.state.items.length + 1)}</button> 
       </form> 
      </div> 
     ); 
    } 

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

    handleSubmit(e) { 
     e.preventDefault(); 
     var newItem = { 
      text: this.props.w +''+this.props.t, 
      id: Date.now() 
     }; 
     this.setState((prevState) => ({ 
      items: prevState.items.concat(newItem), 
      text: '' 
     })); 
    } 

    delete(id){   // How that function knows id of item that need to delete and how to delete item? 
     this.setState(this.item.id) 
    } 
} 

class TodoList extends React.Component { 
    render() { 
     return (
      <ul> 
       {this.props.items.map(item => (
        <li key={item.id}>{item.text}<button onClick={this.delete.bind(this)}>Delete</button></li> 
       ))} 
      </ul> 
     ); 
    } 
} 

Answer 1

你正在管理父组件的数据，并呈现在儿童组件的UI，所以从子组件删除的项目，你需要传递一个函数与数据一起，请从孩子说功能和通过列表项的任何唯一标识符，在父组件内使用该唯一标识符删除项目。

第一步：传递从父组件的功能与数据一起，这样的：

<TodoList items={this.state.items} _handleDelete={this.delete.bind(this)}/> 

第二步：定义在父组件_handleDelete功能是这样的：

_handleDelete(id){ 
    this.setState(prevState => ({ 
     data: prevState.data.filter(el => el != id) 
    })); 
} 

第三步：使用this.props._handleDelete()从子组件调用该功能：

class TodoList extends React.Component { 

    _handleDelete(id){ 
     this.props._handleDelete(id); 
    } 

    render() { 
     return (
      <ul> 
       {this.props.items.map(item => (
        <li key={item.id}>{item.text}<button onClick={this._handleDelete.bind(this, item.id)}>Delete</button></li> 
       ))} 
      </ul> 
     ); 
    } 
} 

检查该工作示例：

class App extends React.Component{ 
 
    constructor(){ 
 
     super(); 
 
     this.state = { 
 
     data: [1,2,3,4,5] 
 
     } 
 
     this.delete = this.delete.bind(this); 
 
    } 
 
    
 
    delete(id){ 
 
     this.setState(prevState => ({ 
 
      data: prevState.data.filter(el => el != id) 
 
     })); 
 
    } 
 
    
 
    render(){ 
 
     return(
 
      <Child delete={this.delete} data={this.state.data}/> 
 
    ); 
 
    } 
 
} 
 

 
class Child extends React.Component{ 
 

 
    delete(id){ 
 
     this.props.delete(id); 
 
    } 
 
    
 
    render(){ 
 
     return(
 
     <div> 
 
      { 
 
       this.props.data.map(el=> 
 
        <p onClick={this.delete.bind(this, el)}>{el}</p> 
 
      ) 
 
      } 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

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

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

 
<div id='app'/>