react父子组件传值

父组件向子组件传值

本示例使用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