react组件之间传值

来源：互联网发布：h6837wi网络摄像机编辑：程序博客网时间：2024/05/29 12:00
父组件向子组件传值<body><div id = "out"></div><script type="text/babel">var Par = react.createClass({getInitialState:function(){return{res0:"",res1:""}},tap:function(e){console.log(e.target.value);var str = e.target.value;this.setState({res0:str,})},tap1:function(e){console.log(e.target.value);var str = e.target.value;this.setState({res1:str})},render:function(){console.log(this.props);return(<div><h1>父组件</h1>数量<input type="text" onChange = {this.tap1}/><br/>单价<input type = "text" onChange = {this.tap}/><Chd name = {this.state.res0*this.state.res1}/></div>)}});var Chd = React.createClass({render:function(){var pri = this.props.name;if(pri>=88){pri = this.props.name;}else{pri = this.props.name+10;}console.log(this.props);return(<div><h1>子组件</h1><div>{pri}</div></div>)}});ReactDOM.render(<Par/>,document.getElementById("out"));</script></body>----------子组件向父组件传值<body><div id = "out"></div><script type = "text/babel">var Demo = React.createClass({getInitialState:function(){return{res:""}},render:function(){var _this = thisreturn(<div><div>{_this.state.res}</div><h1>父组件</h1><Chi ty = {function(s){_this.setState({res:s});}}/></div>)}});var Chi = React.createClass({tap:function(){console.log(this.refs.sre.value);var str = this.refs.sre.value;this.props.ty(str);},render:function(){return(<div><h1>子组件</h1><input type = "text" ref = "sre" onChange = {this.tap}/></div>)}});ReactDOM.render(<Demo/>,document.getElementById("out"));</script></body>点击按钮隐藏密码<body><div id = "out"></div></body><script type = "text/babel"> var Demo = React.createClass({getDefaultProps:function(){return{url:"good.json"}},getInitialState:function(){return{res:"password",res1:"明文",res2:[]}},componentWillMount:function(){var _this = this;$.get(_this.props.url,function(data){console.log(data);_this.setState({res2:data});console.log(_this.state.res2)})},tap:function(){if(this.state.res == "password"){this.setState({res:"text",res1:"密文"})}else{this.setState({res:"password",res1:"明文"})}},render:function(){return(<div><input type = {this.state.res} /><button onClick = {this.tap} ref = "a">{this.state.res1}</button>{console.log(this.state.res2)}{this.state.res2.map(function(item){return <div><p>{item.name}</p><p>{item.gid}</p><p>{item.gprice}</p></div>})}</div>)}});ReactDOM.render(<Demo/>,document.getElementById("out"));</script>取值方式var Demo = React.createClass({render:function(){var sty={width:'500px',height:'200px',border:'1px solid red',margin:'0 auto'}console.log(this.props)return(<div><h1>属性字符串:{this.props.name}</h1><h1>属性数组:{this.props.aa[2]}</h1><div style={sty}>{this.props.bb.age}<br/>{this.props.bb.age1}<br/>{this.props.bb.age2}</div><h2>组合数据数组:{this.props.cc[1][0]}{this.props.cc[2].age}</h2><h2>组合数据对象:{this.props.dd.name2.age} <br/> {this.props.dd.name3[0]}</h2></div>)}})var str="hello react";var arr=['你好',2222,'hi'];var obj={age:'白雪公主',age1:'七个小矮人',age2:'毒苹果'  }var arrx=['hello react',['你好',2222,'hi'],{age:'白雪公主',age1:'七个小矮人',age2:'毒苹果'  }]var arry = {name:'hello react',name2:{age:'白雪公主',age1:'七个小矮人',age2:'毒苹果'},name3:['你好',2222,'hi']}
阅读全文
0 0