react父子组件传值问题

最新推荐文章于 2023-09-27 20:41:26 发布

kksw1121

最新推荐文章于 2023-09-27 20:41:26 发布

阅读量318

点赞数

文章标签： react react父子组件传值

本文链接：https://blog.youkuaiyun.com/qq_43225030/article/details/90751862

版权

本文探讨了React中父子组件间的数据传递，包括父组件如何向子组件传递数据以及子组件如何更新并反映到父组件的状态，实现了子组件修改值后在父组件实时显示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.父组件向子组件传数据

//父组件Father
import React from 'react';
import Child from './child'

export default class Father extends React.Component{
  params = {
    msg : "this is a msg"

  };
  render(){
    return <Child params={this.params}/>
  }
}

//子组件Child
import React from 'react';

export default class Child extends React.Component{
   
  render(){
    return  <div>{this.props.params.msg}</div>
  }
}

二.子组件向父组件传数据

子组件修改的值显示在父组件中
在这里插入图片描述

//子组件
import React from 'react';

export default class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        }
    }
    valueChanged = (e) => {
        this.setState({
            value : e.target.value
        })

    }
    sendChanged = () => {
        this.props.onValueChanged(this.state.value);

    }
    render() {
        return <div>
            <input type="text" value={this.state.value} onChange={this.valueChanged} />
            <button onClick={this.sendChanged}>确定</button>
        </div>
    }
}

//父组件
import React from 'react';
import Child from './child'

export default class Father extends React.Component{
   constructor(props){
       super(props);
       this.state={
           receiveValue :''
       }
   }
   receiveChanged = (value)=>{
     this.setState({
         receiveValue : value
     })
  }
  render(){
    return <div>
        <Child onValueChanged={this.receiveChanged}/>
        <div>来自子组件的值：{this.state.receiveValue}</div>
    </div>
  }
}