1.首先我们来创建一个组件,初始化一个变量来显示数据
<div id="my"></div>
class Welcome extends React.Component{
constructor() {
super();
this.state = { //修改setState state初始化 一定要constructor中定义
value:'12345'
}
};
render(){
return (
<div>
<input type="text" value={this.state.value} />
<h1>{this.state.value}</h1>
</div>
)
}
};
ReactDOM.render(
<div>
<Welcome></Welcome>
</div>,
document.getElementById("my")
);
}此时显示的是这样子的,我们并不能改变,value的值
如果想实现双向绑定的效果,需要在input输入框中加一个onChange事件
即<input type="text" value={this.state.value}
onChange={(event)=>this.handleChange(event)}/>
在这个事件中把取到得值用setState重新写在定义的state里面,我们就实现了react 的双向数据绑定了!
handleChange(event){
console.log(event.target);
this.setState({value:event.target.value})
};以下是整合后的代码!包括单选和下拉,道理都是差不多的哦!
<body>
<div id="my"></div>
<script type="text/babel">
window.onload = function(){
/*组件的定义有二种，第二种es6 class*/
class Welcome extends React.Component{
constructor() {
super();
this.state = { //修改setState state初始化 一定要constructor中定义
value:'12345',
male:'man',
select:'red'
}
};
handleChange(event){
console.log(event.target);
this.setState({value:event.target.value})
};
handleRadio(event){
console.log(event.target);
this.setState({male:event.target.value})
};
handleSelect(event){
this.setState({select:event.target.value})
}
handleSubmit() {
alert(JSON.stringify(this.state))
}
render(){
var arr =['北京','上海','杭州啊'];
return (
<div>
<input type="text" value={this.state.value} onChange={(event)=>this.handleChange(event)}/>
<h1>{this.state.value}</h1>
<div>
<input type="radio" name="radioName" checked={this.state.male =='man' ? true :false} value="man" onChange={(event)=>this.handleRadio(event)}/>男
<input type="radio" name="radioName" checked={this.state.male =='woman' ? true :false} value="woman" onChange={(event)=>this.handleRadio(event)}/>女
<div>
<br/>地址:
<select value={this.state.select} onChange={(event)=>this.handleSelect(event)}>
{
arr.map(function(item,index){
return <option key={index} value={item}>{item}</option>
})
}
</select>
</div>
<br/>
<button onClick={()=>this.handleSubmit()}>提交</button>
</div>
</div>
)
}
};
ReactDOM.render(
<div>
<Welcome></Welcome>
</div>,
document.getElementById("my")
);
}
</script>
</body>执行效果
