react组件传值
**父组件向子组件传值**
-------------
<div id = "out"></div>
<script type="text/babel">
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>
)
}
});
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>
)
}
});
ReactDOM.render(<Par/>,document.getElementById("out"));
</script>
----------
子组件向父组件传值
<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"]
}
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 浅谈Vue项目优化
- 下一篇： 数据结构基础（1）--数组C语言实现--动态内存分配
