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

问题描述

问 题

场景：有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个方法的功能？谢谢。

解决方案

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

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

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

这篇关于javascript - react.js 怎么通过一个action的方法，改变多个input的value且value的值是不同的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！