react父组件向子组件传递数据

Props传递数据

父组件

import React,{Component} from 'react'
import {Redirect,Switch,Route} from 'react-router-dom'
import Son from './Son'
export default class Father extends Component{
  state={
    data:'',          //1.保存数据
    inputData:'',
    jump:false
  }
  textChange =(e)=>{
    this.setState({data:e.target.value});
  }
  inputButton =()=>{
    this.setState({inputData:this.state.data});
  }
    render(){
      // console.log(this.state.data);
      const data = this.state.inputData;   //2.获取数据
      let jump = this.state.jump;
      console.log(jump);
        return(
        <div> 
          <div>Father组件</div>
          <input type="text" onChange={this.textChange}/>
          <button onClick={this.inputButton}>点击显示数值</button>
          <Son data={data}></Son>   //3.将数据上传到组件
        </div>
        )
    }
}

子组件

import React,{Component} from 'react'
import PropTypes from'prop-types'
export default class Son extends Component{
    static propTypes = {											//4.规定组件的属性
        // comment: PropTypes.object.isRequired,
        // deleteData:PropTypes.func.isRequired,
        // index:PropTypes.number.isRequired
        data:PropTypes.string.isRequired
    }
  textChange =(e)=>{
    this.setState({data:e.target.value});
  }
    render(){

        const {data} = this.props;
        return(
        <div> 
         <h1>{data}</h1>						//5.显示内容

        </div>
        )
    }
}