react 父子组件传参简单的小案例

最新推荐文章于 2022-11-17 16:27:13 发布

姝光

最新推荐文章于 2022-11-17 16:27:13 发布

阅读量274

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_46370075/article/details/107229824

版权

父 App.js

  // 导入子组件
  import Search from './components/Search'

  class App extends Component{
    construction(props){
      super(props)
      this.state={

      }
    }
  
    // 设置自定义的方法函数


    // 生命周期 每次都变的时候就调用
    render(){
      return(
        //子组件  自定义函数方法传给子组件={调用的本页面的方法}
        <Search onAddList={this.enter} ></Search>
        <div>
        <h1>进行中</h1>
            { //遍历数据(映射)
              doing.map((item) => (
                //    传的参数的名={传的参数的值} 传的方法名={调用本页的方法}
                <List key={item.id} item={item} onOnClick={this.change} onDel={this.del}></List>
              ))
            }
        </div>
      )
    }
  }
  export default App;

子组件 Search.js // 有状态组件

  import React, { Component } from 'react'
  // 导出
  export default class Search extends Component {
    constructor() {
      super()
    }
    // 鼠标按下事件
    enter = (e) => {
      e.target.value = e.target.value.trim()
      if (e.keyCode === 13 && e.target.value) {
        <!-- 把获取到的输入框中的值  通过父组件传给子组件的方法传递给父组件 -->
        this.props.onAddList(e.target.value)
        e.target.value = ''
      }
    }
    render () {
      return (
        <!-- 键盘按下事件 调用本页面的函数方法 -->
        <input type="text" name="text" onKeyDown={this.enter} />
      )
    }
  }

子组件 List.js //无状态组件（只负责渲染和展示）

  import React from 'react'
  // 导出                          // 数组解构 拿到父组件传过来的参数 方便再下面调用
  export default function List ({ item, onOnClick, onDel }) {
    return (
      <li>
                                               //     点击事件={直接调用父组件的方法}
        <input type="checkbox" defaultChecked={item.finish} onClick={() => onOnClick(item.id)} />
        {item.text}
        //点击事件={直接调用父组件的方法}
        <span onClick={() => onDel(item.id)}>X</span>
      </li>
    )
  }