关闭

react父子组件传值

来源:网络 文章列表 2020-06-08 8
父组件向子组件传值 本示例使用todolist做演示 1.父组件 import React, { Component, Fragment } from 'react' // 引入子组件 import TodoItem from './TodoItem' class TodoList extends Component { constructor(props) {

父组件向子组件传值

本示例使用todolist做演示

1.父组件

import React, { Component, Fragment } from 'react'
// 引入子组件
import TodoItem from './TodoItem'

class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 数组中的值
      list: ['vue', 'angular', 'react']
    }
  }
  render() {
    return(
      <Fragment>
        <ul> 
          {
            this.state.list.map((v, k) => {
              return (
                <div key={ k }>
                  {/* 通过content={item} 将数据传给子组件 */}
                  <TodoItem content={v} index={k}/>
                </div>
              )
            })
          }
       </ul>
      </Fragment>
    )
  }
export default TodoList

2.子组件

import React from 'react'

class TodoItem extends React.Component{
  render() {
   // this.props.content 接受父组件传递过来的信息
   return <div>{ this.props.content }</div>
  }
}

export default TodoItem

子组件向父组件传递消息

1.父组件

通过点击list,删除对应的项


import React, { Component, Fragment } from 'react'
import TodoItem from './TodoItem'

class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 数组中的值
      list: ['vue', 'angular', 'react']
    }
  }
  render() {
    return(
      <Fragment>
        <ul>
          {
            this.state.list.map((v, k) => {
              return (
                <div key={ k }>
                  {/* 通过content={item} 将数据传给子组件 
                    通过deleteItme将父组件的方法传给子组件
                    将父组件的this,传递给子组件
                */}
                  <TodoItem content={v} index={k} deleteItme={this.handleDelete.bind(this)}/>
                </div>
              )
           
            })
          }
        </ul>
      </Fragment>
    )
  }
  // 删除事件
  handleDelete(index) {
    let list = [...this.state.list]
    list.splice(index, 1)
    //1. 不希望直接修改state里面的数据 故先拷贝出来
    //2. splice 删除后返回的是被删除的项,并改变原数组
    this.setState({
      list: list
    })
  }
}

export default TodoList

2.子组件

import React from 'react'
class TodoItem extends React.Component{
  render() {
    // this.props.content 接受父组件传递过来的信息
    return <div onClick={this.handleClick.bind(this)}>{ this.props.content }</div>
  }
  
  handleClick() {
    // 调用父组件的方法 并把对应的索引传给父组件
    this.props.deleteItme(this.props.index)
  }
}

export default TodoItem

 

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论