您好,欢迎来到欧得旅游网。
搜索
您的当前位置:首页react中父子组件利用state和props进行双向参数传递

react中父子组件利用state和props进行双向参数传递

来源:欧得旅游网

版权声明:转载请注明作者(独孤尚良dugushangliang)出处: https:///dugushangliang/article/details/90577356

 

参阅并调试代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 React 实例</title>
    <script src="https://cdn.staticfile.org/react/15.4.2/react.min.js"></script>
	<script src="https://cdn.staticfile.org/react/15.4.2/react-dom.min.js"></script>
	<script src="https://cdn.staticfile.org/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
	  <div id="example"></div>
    <script type="text/babel">
class CptBody extends React.Component{
    constructor(){
        super();
        this.state = {username : 1}; //可以传json等很多格式(这个是初始化赋值)
    }
    //click事件函数
    changeAge(){
        this.setState({username:1+this.state.username})
    }
    //change事件函数
    changeUsername(event){
        this.setState({username:parseInt(event.target.value)})
    }
    render(){
       return(
            <div>
                <h1>下面的操作有惊喜</h1>
                <p>{this.state.username}</p>
                <input type="button" value="点击改变username" onClick={()=>this.changeAge()}/>
                <BodyChild changeUsername={this.changeUsername.bind(this)} getname={this.state.username}/>
            </div>
        )
    }
}


class BodyChild extends React.Component{
    render(){
        return(
            <div>
                <p>子页面输入:<input type='text' value={this.props.getname} onChange={this.props.changeUsername} /></p>

            </div>
        )
    }
}
    ReactDOM.render(
        <CptBody  />,
        document.getElementById('example')
    );
    </script>
  </body>
</html>

BodyChild组件的render函数返回值jsx中<p>的value是从父组件获取的getname这个变量值,onChange获取的是changeUsername这个函数,所以如果文本框中的值改变了,改变值这个事件会触发changeUsername这个函数,这个函数会获得事件的值,即我们文本框修改后的值,并将其赋值给父组件的state.username这个变量。而父组件的这个变量改变后,state随之改变,这时候,render会重新启动,所以我们会看到修改后的值。

父组件的jsx中有一个箭头函数,有一个bind函数,这两者有什么区别吗?经验证,这两者是可以互换的。

onClick={this.changeAge.bind(this)}和onClick={()=>this.changeAge()}可以互换。

本例代码在“菜鸟教程在线编辑器”中运行。

 

独孤尚良dugushangliang——著

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- ovod.cn 版权所有 湘ICP备2023023988号-4

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务