react 子元素改变父元素属性

最新推荐文章于 2022-07-25 11:19:06 发布

domBREAKPoint

最新推荐文章于 2022-07-25 11:19:06 发布

阅读量4.1k

点赞数

分类专栏：前端开发文章标签： class react

本文链接：https://blog.csdn.net/domBREAKPoint/article/details/77493648

版权

前端开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

子元素 childrenComponent.js


/**
 * Created by ANN on 2017/7/22.
 */
import  React from 'react';


export default class ChilidProps extends React.Component{

    render(){

        return(

            <div>
                <p>子页面输入：<input onChange={this.props.handleChildValueChange}/></p>
            </div>
        )
    }
}

父元素
Parentprops.js

/**
 * Created by ANN on 2017/7/31.
 */
/**
 * Created by ANN on 2017/7/29.
 */
var React = require('react');

import ReactDOM from "react-dom"
import ChilidProps from './components/childrenComponent'

class MousComonent extends React.Component{
    constructor(){
        super()
        this.state={
            current:"8"
        }

    }
    //通过子元素改变父元素props属性 实现通信
    handleChildValueChange(event){
        var value = event.target.value
        this.setState({current:value})
        console.log(value)
    }
    render(){
        return(
            <div className="container" >
                {this.state.current}

                    <ChilidProps 
                    handleChildValueChange={this.handleChildValueChange.bind(this)}/>

            </div>

        )
    }
}
ReactDOM.render(<MousComonent/>,document.getElementById("main"))