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;

欢迎关注小程序，感谢您的支持！