react父子组件传值

引入三个插件

父组件像子组件传值

<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 = this
return(
<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']

}

ReactDOM.render(<Demo name={str} aa={arr} bb={obj} cc={arrx} dd={arry}/>,document.getElementById("out"))
//ReactDOM.render(<Demo1 {...obj}/>,document.getElementById('out'))

/*
1/key-value形式正常数据传值，组件内部this。props获取（对象）
2/｛...｝展开式传值传输数据对对象形式，内部获取直接获取该对象的key名
*/

秒客网

react父子组件传值

相关文章