react中用图片来实现checkbox多选功能的疑问

Question

想实现用图片的形式去做checkbox的功能，思路就是，我在点击的时候去切换一个flag的状态0和1，但是现在遇到一个问题，就是在点击的时候如何切换当前元素的图片。
如果维护一个state的话，点击就会全部选中或者取消选中，每一个元素维护一个状态，少了可以，如果很多checkbox，这样会有太多状态，并且他是不确定的。

求解，如何区分开每一个对应的状态？谢谢。

import React,{Component} from 'react';
import check from './../assets/img/check.png'
import checked from './../assets/img/checked.png'
let arrs = [];
class RadioMode extends Component{
    constructor(props){
        super(props);
        this.state={
            values:"",
            checkArr:[]
        }
    }
    radioSelect(e){
        this.setState({
            values:e.target.value
        });
    }
    checkSelect(e){
        if(e.target.checked){
            arrs.push(e.target.value);
        }else{
            arrs = arrs.filter(item => item !== e.target.value)
        }
        this.setState({
            checkArr:arrs
        });
    }
    checkSelects(e){
        e.stopPropagation();
        if(e.target.getAttribute('flag') === "0"){
            e.target.setAttribute('flag',"1")
        }else{
            e.target.setAttribute('flag',"0")
        }
    }
    render(){
        console.log(this.state.checkArr);
        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>
                <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>
                <h1>多选-图标</h1>
                <ul>
                    <li>
                        radio1:
                        <img src={this.state.checkFlag === "1" ? checked : check} flag='0' onClick={e => this.checkSelects(e)} alt="" />
                    </li>
                    <li>
                        radio2:
                        <img src={this.state.checkFlag === "1" ? checked : check} flag='0' onClick={e => this.checkSelects(e)} alt="" />
                    </li>
                    <li>
                        radio3:
                        <img src={this.state.checkFlag === "1" ? checked : check} flag='0' onClick={e => this.checkSelects(e)} alt="" />
                    </li>
                    <li>
                        radio4:
                        <img src={this.state.checkFlag === "1" ? checked : check} flag='0' onClick={e => this.checkSelects(e)} alt="" />
                    </li>
                </ul>
            </div>
        )
    }
} 
export default RadioMode;

Answer 1

你可以学学antd，antd抽象了个form层，在form层内可以进行双向绑定
https://ant.design/components...

Answer 2

已解决。

import React,{Component} from 'react';
import check from './../assets/img/check.png'
import checked from './../assets/img/checked.png'
let arrs = [];
class RadioMode extends Component{
    constructor(props){
        super(props);
        this.state={
            values:"",
            checkArr:[]
        }
    }
    radioSelect(e){
        this.setState({
            values:e.target.value
        });
    }
    checkSelect(e){
        if(e.target.checked){
            arrs.push(e.target.value);
        }else{
            arrs = arrs.filter(item => item !== e.target.value)
        }
        this.setState({
            checkArr:arrs
        });
    }
    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>选中了：{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>
                <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>
                <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;

Answer 3

显示图片部分 可以用:checked伪类控制背景图的position 或者修改:after下content的url
state控制可以用元素的name+value作为key 类似
const {checkedData}=this.state;
const {name,value}=e.target;
checkedData[${name}_${value}]=!!checkedData[${name}_${value}];
this.setState({checkedData})试试

Answer 4

你可以尝试使用css伪类 加上 background 来实现