react.js 怎么通过一个action的方法，改变多个input的value且value的值是不同的

Question

场景：有5个input,每个input的value都是不同的，怎么通过一个action的方法来控制这5个不同的value.

在action里，我知道的是，一个数据类型，对应一个type.那么这5个value,应该有5个type，是吧？但是为了方便以后更改，只需要一个方法，要怎么实现呢？

下面是我的代码,5个type，5个data：

export const SET_TABONE_UNSELECT_2XKEY = 'SET_TABONE_UNSELECT_2XKEY';
export const SET_TABTWO_UNSELECT_2XKEY = 'SET_TABTWO_UNSELECT_2XKEY';
export const SET_TABTHREE_UNSELECT_2XKEY = 'SET_TABTHREE_UNSELECT_2XKEY';
export const SET_TABFOUR_UNSELECT_2XKEY = 'SET_TABFOUR_UNSELECT_2XKEY';
export const SET_TABFIVE_UNSELECT_2XKEY = 'SET_TABFIVE_UNSELECT_2XKEY';

5个action的方法：

export const SET_UN_SELECT_2XIMG_KEY = 'SET_UN_SELECT_2XIMG_KEY';
export function setUnselect2xImgQiniuKey(qiniuKey,obj){
    return{
        type: SET_UN_SELECT_2XIMG_KEY,
        data: {
            unSelect2XImgKey:qiniuKey,
            unSelect2XImgObj: obj
        }
    }
}

export const SET_TABTWO_UNSELECT_2XKEY = 'SET_TABTWO_UNSELECT_2XKEY';
export function setTabTwoUnSelect2XKey(qiniuKey,obj){
    return{
        type: SET_TABTWO_UNSELECT_2XKEY,
        data: {
            tabTwoUnSelect2XImgKey:qiniuKey,
            tabTwoUnSelect2XImgObj:obj
        }
    }
}

export const SET_TABTHREE_UNSELECT_2XKEY = 'SET_TABTHREE_UNSELECT_2XKEY';
export function setTabThreeUnSelect2XKey(qiniuKey,obj){
    return{
        type: SET_TABTHREE_UNSELECT_2XKEY,
        data: {
            tabThreeUnSelect2XImgKey:qiniuKey,
            tabThreeUnSelect2XImgObj: obj
        }
    }
}


export const SET_TABFOUR_UNSELECT_2XKEY = 'SET_TABFOUR_UNSELECT_2XKEY';
export function setTabFourUnSelect2XKey(qiniuKey,obj){
    return{
        type: SET_TABFOUR_UNSELECT_2XKEY,
        data: {
            tabFourUnSelect2XImgKey:qiniuKey,
            tabFourUnSelect2XImgObj: obj
        }
    }
}

export const SET_TABFIVE_UNSELECT_2XKEY = 'SET_TABFIVE_UNSELECT_2XKEY';
export function setTabFiveUnSelect2XKey(qiniuKey,obj){
    return{
        type: SET_TABFIVE_UNSELECT_2XKEY,
        data: {
            tabFiveUnSelect2XImgKey:qiniuKey,
            tabFiveUnSelect2XImgObj:obj
        }
    }
}

怎么使用一个方法，实现这5个方法的功能？谢谢。

Answer 1

为什么要在key上面做文章？你这几个方法，只要相同的key，用type区分即可。如果key不同，很显然相应的处理方法也不同，完全没必要。

export function setKey(type, qiniuKey, obj){
    return{
        type,
        data: {
            imgKey: qiniuKey,
            imgObj: obj
        }
    }
}

如果还是想要这么多个方法名，bind成新函数即可。

Answer 2

1.提取公共方法：

function genData(qiniuKey, obj, n) {
    let data = {}
    
    data[`tab${n}Select2XImgKey`] = qinuKey
    data[`tab${n}UnSelect2XImgObj`] = obj
    
    return data
}

export function setUnselect2xImgQiniuKey(qiniuKey, obj, n) {
    const data = genData(qiniuKey, obj, n)
    return {
        type: SET_UN_SELECT_2XIMG_KEY,
        data
    }

}

// 后续的类似

2.合并type, 在reducer里面进行逻辑对于不同input的判断：

export const SET_TAB_UNSELECT_2XKEY ＝ "SET_TAB_UNSELECT_2XKEY"

export function set2xImgQiniuKey(qiniuKey, obj, n) {
    let data = {}
    data[`tab${n}Select2XImgKey`] = qinuKey
    data[`tab${n}UnSelect2XImgObj`] = obj
    
    return {
        type: SET_TAB_UNSELECT_2XKEY,
        n,
        data
    }

}