React跨组件crud增删改查小案例

Posted 2021-05-29 ༺初辰༻

案例需求

实现日记的展示、新增、修改和删除功能

效果展示

功能分析

查：日记的列表展示

• 父组件传入日记数组数据

posts={this.state.posts}

• 日记列表子组件通过this.props接收，并用map()方法循环遍历

this.props.posts.map(item =>
  <li key={item.id} className="listli">
    <input
      style={{ 'display': 'none' }}
      value={this.state.text}
      onChange={this.handleForm}
      className="eidInput"
    ></input>
    <span className={item.id}>{item.text}</span>
    <div>
      <button onClick={this.eidPost}>编辑</button>
      <button onClick={() => this.delPost(item.id)} >删除</button>
    </div>
  </li >
)

增：新增日记

• 点击发表按钮时，结合旧数组和文本框内容形成新数组并通过this.props.getNewposts(newposts)传给父组件

if (this.state.text === '') {
  alert('请输入内容')
  return
}
let newposts = [{
  id: this.props.posts.length + 1,
  text: this.state.text
}, ...this.props.posts]
this.props.getNewposts(newposts)
this.setState({
  text: ''
})

• 父组件接收新数据并替换state中的旧数据

getNewposts={this.getNewposts}

getNewposts = (newposts) => {
  this.setState({
    posts: newposts
  })
}

改：修改日记内容

• 点击编辑按钮时，获取此条日记的数据并在文本框value中展示，并将按钮内容改为保存

if (this.state.isEid === true) {
  e.target.innerhtml = "保存"
  this.setState({
    text: e.target.parentNode.parentNode.firstElementChild.nextElementSibling.innerHTML
  })
  e.target.parentNode.parentNode.firstElementChild.style.display = 'block';
  e.target.parentNode.parentNode.firstElementChild.nextElementSibling.style.display = 'none';
  this.setState({
    isEid: false
  })
}

• 点击保存按钮时，获取文本框中的新数据，并传给父组件

else {
    e.target.innerHTML = "编辑"
    e.target.parentNode.parentNode.firstElementChild.style.display = 'none';
    e.target.parentNode.parentNode.firstElementChild.nextElementSibling.style.display = 'block';
    this.setState({
      isEid: true
    })
    this.props.eidPost(e.target.parentNode.parentNode.firstElementChild.nextElementSibling.className, this.state.text)
  }
}

• 在父组件中接收新数据和id值，并替换成新的数据

eidPost={this.eidPost}

eidPost = (postId, newtext) => {
  let newpost = []
  postId = parseInt(postId)
  this.state.posts.forEach(function (item) {
    if (item.id !== postId) {
      newpost.push(item)
    } else {
      let post = item
      post.text = newtext
      newpost.push(post)
    }
  })
  this.setState({
    posts: newpost
  })
}

删：删除日记

• 点击删除按钮时，获取id值并传给父组件

onClick={() => this.delPost(item.id)}

delPost (postId) {
  this.props.delPost(postId)
}

• 在父组件中接收并修成新的数据数组替换旧数组

delPost = (postId) => {
  let newpost = []
  this.state.posts.forEach(function (item) {
    if (item.id !== postId) {
      newpost.push(item)
    }
  })
  this.setState({
    posts: newpost
  })
}

代码下载

免费（0积分）下载