react实现点击对应删除

需求:点击的时候,删除当前下标对应的内容(使用了父子组件)

父组件:

import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';
class App extends Component {
  state = {
    persons: [
      {
        name: "周家大小姐",
      }, {
        name: "陈家大小姐",
      }, 
      {
        name: "王家大小姐",
      },
      {
        name: "王家大小姐",
      },
      {
        name: "王家大小姐",
      },
      {
        name: "王家大小姐",
      },
      {
        name: "王家大小姐",
      },
      {
        name: "王家大小姐",
      },
 
    ],
    showPreson: false,
 
  };
  // 删除事件
  presonDelet = (presoIndex) =>{
    const persons =  [...this.state.persons]//es6的操作运算符,可以有效防止后续的state变化
    persons.splice(presoIndex,1)
    this.setState({
      persons:persons
    })
  }
  render() {
    return (
      <div className="App">
        <Footer name={person.name} key={index}  presonHandler={()=>this.presonDelet(index)}/>
      </div>
    );
  }
}
 
export default App;

子组件 :

import React from 'react'
import './Footer.css'
 
const person = (props) =>{
  return(
    <div className="footer">
//onClick={props.presonHandler} 接收父组件传过来的方法
        <p onClick={props.presonHandler}>我的名字叫{props.name}</p>
    </div>
  )
}
export default person;

更多相关技术文章，请访问HTML中文网！