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;
//可進行數據請求或者邏輯判斷等。。。
}