react中单选radio、多选checkbox的实现及图片类型的单选和多选
react的单选和多选跟vue的还是有点区别,vue用v-modle可以实现双向绑定,但是react是单向数据流,所以需要用onChange事件来解决。
先看一张图:

一:单选
import React,{Component} from 'react';
let arrs = [];
class RadioMode extends Component{
constructor(props){
super(props);
this.state={
values:""
}
}
radioSelect(e){
this.setState({
values:e.target.value
});
}
render(){
return(
<div>
<h1>选中了:{this.state.values}</h1>
<ul onChange={(e) => this.radioSelect(e)}>
<li>radio1:<input type="radio" name="test" value="a1" /></li>
<li>radio2:<input type="radio" name="test" value="a2" /></li>
<li>radio3:<input type="radio" name="test" value="a3" /></li>
<li>radio4:<input type="radio" name="test" value="a4" /></li>
</ul>
</div>
)
}
}
export default RadioMode;
二:多选
import React,{Component} from 'react';
let arrs = [];
class RadioMode extends Component{
constructor(props){
super(props);
this.state={
checkArr:[]
}
}
checkSelect(e){
if(e.target.checked){
arrs.push(e.target.value);
}else{
arrs = arrs.filter(item => item !== e.target.value)
}
this.setState({
checkArr:arrs
});
}
render(){
return(
<div>
<h1>选中了:{this.state.checkArr.map((item) => {
return(
<span key={item}>{item}</span>
)
})}</h1>
<ul onChange={e => this.checkSelect(e)}>
<li>radio1:<input type="checkbox" name="test1" value="b1" /></li>
<li>radio2:<input type="checkbox" name="test1" value="b2" /></li>
<li>radio3:<input type="checkbox" name="test1" value="b3" /></li>
<li>radio4:<input type="checkbox" name="test1" value="b4" /></li>
</ul>
</div>
)
}
}
export default RadioMode;
三:多选-图标的形式(单选很简单,就不贴代码了,最主要的就是多选)
import React,{Component} from 'react';
import check from './../assets/img/check.png'
import checked from './../assets/img/checked.png'
class RadioMode extends Component{
constructor(props){
super(props);
this.state={
}
}
checkSelects(name,e){
if(e.target.getAttribute('flag') === "0"){
e.target.setAttribute('flag',"1")
}else{
e.target.setAttribute('flag',"0")
}
this.setState({
[name]:e.target.getAttribute('flag')
});
}
render(){
console.log(this.state)
return(
<div>
<h1>多选-图标</h1>
<ul>
<li>
radio1:
<img src={this.state['c'+1] === "1" ? checked : check} onClick={this.checkSelects.bind(this,"c1")} flag='0' alt="" />
</li>
<li>
radio2:
<img src={this.state['c'+2] === "1" ? checked : check} onClick={this.checkSelects.bind(this,"c2")} flag='0' alt="" />
</li>
<li>
radio3:
<img src={this.state['c'+3] === "1" ? checked : check} onClick={this.checkSelects.bind(this,"c3")} flag='0' alt="" />
</li>
<li>
radio4:
<img src={this.state['c'+4] === "1" ? checked : check} onClick={this.checkSelects.bind(this,"c4")} flag='0' alt="" />
</li>
</ul>
</div>
)
}
}
export default RadioMode;
欢迎关注小程序,感谢您的支持!