搜索组件 - 父组件向子组件传值(子组件调用父组件方法)

最新推荐文章于 2024-08-13 14:59:12 发布

嚣张.miner

最新推荐文章于 2024-08-13 14:59:12 发布

阅读量1k

点赞数

分类专栏： react 文章标签： react 子组件调用父组件方法 props 父组件向子组件传值

本文链接：https://blog.csdn.net/zm_miner/article/details/84583156

版权

本文介绍了在React中如何实现父组件向子组件传值以及子组件调用父组件方法。文章详细展示了在搜索组件场景下，如何在父组件中通过props获取子组件输入框的值，并在点击搜索时调用父组件的方法。同时讨论了如何在不依赖特定事件（如搜索）的情况下，从父组件直接调用子组件的方法。

摘要由CSDN通过智能技术生成

接着上一篇文章继续 , 传送门, 上一篇地址

搜索组件 - react中子组件向父组件中传值

接着, 在上一篇中, 在父组件中拿到了子组件input框中的内容值, 然后在父组件中使用, 接下来点击搜索以后,我肯定是需要再次调用接口来重新渲染搜索的页面的

所以在父组件调用子组件的位置上添加一个属性, 向子组件传递

<SearchBox
   getInitData={this.propsChildEvent}
    getAparentAjax={() => this.getData(1)}
 />

子组件中只需要使用this.props.getAparentAjax();就可以调用此方法

整个的代码
父组件index.js

import React from 'react';
import TopHead from '../topToopbar/topHead.js'
import { Table, message } from 'antd';
import SearchBox from './searchBox.js';
import { get } from '../../util/http'
import { Link } from 'react-router-dom';
import moment from 'moment';
import $ from 'jquery';

class HomePage extends React.Component {
    constructor() {
        super();
        this.state = {
          nameValue: '',
          idValue: '',
          tableColumns: [],
          tableData: [],
          currentPageSize: 10,
        }
        this.tableColumns = [];
    }
    componentDidMount() {
        // var that = this;
        // $.ajax({
        //     type: 'get',
        //     url: 'http://10.70.119.183:8084//api?pageNum=1&am