react 子元素改变父元素属性

来源:互联网 发布:淘宝无门槛红包设置 编辑:程序博客网 时间:2024/06/06 19:57

子元素 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"))