react 列表循环中单个自由控制里面的元素disabled

记录下情况:

需求是这样的

:

因为整个都是循环出来的, 这控制又是用的变量!

伪代码:

  <Select disabled={!this.state.isOpens['ids'+index]?true:false}

做法就是利用index 去匹配存值:

定义 全 变量: 

    constructor(props) {
        super(props);
        this.state = {
         isOpens:{},

这是点击触发的:

  <Radio.Group name={`specifiedTime${index}`} onChange={(e)=>this.onChangeSpecifiedTime(e,index)} defaultValue={this.state.specifiedTimeValue}>

然后再出发点击选项时间中去存值:

这里的三点运算符非常好用,可以直接塞进去,有就覆盖,没有就丢进去!

    onChangeSpecifiedTime= (e,index) => {
        console.log(e)
        let obj;
        if(e.target.value==3){
             obj = {...this.state.isOpens,['ids'+index]:true}
        }
        if(e.target.value==1){
            obj = {...this.state.isOpens,['ids'+index]:false}
        }

        this.setState({
            isOpens:obj,
            isOvlu:e.target.value
        })

        console.log('radio checked', e.target.value);
        console.log(this.state.isOpens);

    };

在循环里面使用的时候就直接:

  <Select disabled={!this.state.isOpens['ids'+index]?true:false} 

 直接利用index 去匹配对象的属性值就行了!