ReactJS如何从列表中删除项目

ReactJS如何从列表中删除项目

您正在父级组件中管理数据并在子级组件中呈现UI，因此要从子级组件中删除项目，您需要将一个函数与数据一起传递，从子级中调用该函数并在父级组件内部传递列表项的任何唯一标识符使用该唯一标识符删除项目。

步骤1： 将父组件的函数与数据一起传递，如下所示：

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

步骤2：

delete

在父组件中定义函数，如下所示：

delete(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'/>