react父子组件之间的传参

项目文件结构如下图：

实现search组件内输入的值在父组件内接收到。
1.定义接收子组件传的变量

this.state = {
     searchPost:{},//搜索的值
}

2.父组件引入子组件

import Search from './Components/Search/search';

render() {
    return (
        <div id="caseMethod-con">
            <div className = "search-con">
                <Search props={this}/>
            </div>
            <CaseMethodContent props={this.props} searchData={this.state.searchPost}/>
        </div>
    )
}

3.定义接收子组件值的方法

//点击搜索传回的值
getSearchInput = (data) => {
//data是要传的目标参数
    console.log(data);
    this.setState({
        searchPost:data
    })
}

4.子组件用表单获取输入值

<Form onSubmit={this.handleSearchQuery} layout="inline">
    <Form.Item label="辅助选项:">
        {getFieldDecorator('problemIdentifications')(
            <Input placeholder = '请输入' style={{width: '250px'}}/>
        )}
    </Form.Item>
    <Button type='primary' onClick = {this.handleSearchQuery}>查询			         </Button>
</Form>

5.获取输入值并传给父组件（点击查询按钮，把输入值传给父组件）

//查询
handleSearchQuery = (e) => {
    if (e) e.preventDefault();
    const {dispatch, form} = this.props;
    form.validateFields((err, fieldsValue) => {
        if (err) return;
        //获取表单输入值
        let data = this.dealObject(fieldsValue);
       //getSearchInput方法是在父组件内定义的，用于接收子组件传的参数，可以只传data，即this.props.props.getSearchInput(data)
        this.props.props.getSearchInput(data);    
    });
}

这样在父组件内就可以打印出来接收到的参数searchPost。

父组件给子组件传参：
1.引入并使用子组件，searchData是父组件传给子组件的值

import CaseMethodContent from './Components/CaseMethodContent'

<CaseMethodContent searchData={this.state.searchPost}/>

2.子组件接收父组件的值

componentWillReceiveProps(props){
//props是父组件传给子组件的所有数据，是个对象
    const searchData = props.searchData;
}

注：在componentWillReceiveProps内接收数据。在这个生命周期中，可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。 可以将数据请求放在这里进行执行，获取更新过的参数，更新子组件自己的state，请求数据所需的参数，都可以从componentWillReceiveProps(nextProps)中获取。无需将所有的请求都放在父组件中。由于该请求只会在该组件渲染时才会发出，从而减轻请求负担。

延伸：子组件之间的传参的实现。

React本身是没有办法在子组件之间进行传参的，要想传参的话，只能用父组件作为媒介进行传值。
以下要实现的是search组件输入框的值通过父组件传给CaseMethodContent子组件
上面已经实现了子组件给父组件传参

父组件index.js：

import React, { Component } from 'react';
import Search from './Components/Search/search';
import CaseMethodContent from './Components/CaseMethodContent'
import './index.less'

export default class CaseMethod extends Component {
    constructor (props) {
        super (props)
        this.state = {
            searchPost:{},//搜索的值
        }
    }
    //点击搜索传回的值
    getSearchInput = (result, data) => {
        console.log(result);
        console.log(data);
        this.setState({
            searchPost:data
        })
    }
    render() {
        return (
            <div id="caseMethod-con">
                <div className = "search-con">
                    <Search props={this}/>
                </div>
                <CaseMethodContent props={this.props} searchData={this.state.searchPost}/>
            </div>
        )
    }
}

子组件search.js：

点击查询按钮把输入值传给父组件

import React, { Component } from 'react';
import { Input, Button, Form, Select } from 'antd';
import './search.less';
import url from "../../../../utils/url"
import { GetMethod,PostMethod } from "../../../../servers/HttpService";

const { Option } = Select
class casesearch extends Component {
    constructor (props) {
        super(props);
        this.state = {
            title:'展开',
        }
    }
    //处理form数据
    dealObject = (obj) => {
        for (var key in obj){
            obj[key] = obj[key]==undefined?'':obj[key];
            if(key=='problemIdentifications'&&obj[key]==''){
                delete obj[key]
            }
        }
        return obj
    }
    //查询
    handleSearchQuery = (e) => {
        if (e) e.preventDefault();
        const {dispatch, form} = this.props;
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            //获取表单输入值
            let data = this.dealObject(fieldsValue);
            //传递给父组件。
            this.props.props.getSearchInput(this,data);
        });
    }
    render() {
        const { form: { getFieldDecorator }, } = this.props;
        const { title } = this.state;
        return (
            <div id="casesearch-con">
                <Form onSubmit={this.handleSearchQuery} layout="inline">
<Form.Item label="辅助选项:">
                        {getFieldDecorator('problemIdentifications')(
                            <Input placeholder = '请输入' style={{width: '250px'}}/>
                        )}
                    </Form.Item>                    
                    <Button type='primary' onClick = {this.handleSearchQuery}>查询</Button>
                </Form>                
            </div>
        )
    }
}
export default Form.create()(casesearch)

子组件CaseMethodContent/index.js接收参数

componentWillReceiveProps(props){
   const searchData = props.searchData;
//可进行数据请求或者逻辑判断等。。。
}