项目里有这样一个需求,需要根据一个状态字段来展示不同的UI,例如有状态1(state1),状态2(state2),状态3(state3)。。。还有一种特殊情况是该状态可能会返回null,此时则不对应业务状态,直接展示为一种兜底状态。
其中有一个按钮状态是状态1,状态2和兜底状态时,按钮是可点击的,其中兜底状态按钮文字展示为 去看看,其余状态是不可点击置灰的,于是我这里就加上了判断,当state !== 'state1' && state !== 'state2' && state !== null 时,给按钮加上disabled的样式。
大概就是如下的样式:
这样看逻辑上是没啥问题的,测了下也没发现什么问题,但是测试测的时候发现有的手机上当去看看状态时,按钮也是置灰状态的。这里的state字段是枚举型的,只有state为null按钮文字为去看看,但是state为null时又是没有加上置灰的样式的,为什么会这种情况呢?
关于按钮文字这里是这么处理的,定义了一个map,
btnText = {
'state1': '状态1',
'state2': '状态2',
'state3': '状态3',
'state4': '状态4',
'state5': '状态5',
'state6': '状态6'
}
按钮的显示则为{btnText (state) || '去看看'},只有state为null或不在这些情况中才会展示为“去看看”,而后端传回来的状态都在这几种情况中,差了数据也发现后端传的确实是null,此时按钮应该是不置灰的,请教了别人说是也遇到过这种情况,可能是部分机型对null不识别导致的,这里state不等于null了,所以按钮就置灰了。于是就改了一下这里的判断,当state等于state3,state4.......时置灰,这样就能解决这个问题了。但是这是在我们状态是可枚举的情况,如果会有状态不在我们的这个map中就会存在问题了。
对于部分机型不识别null的问题暂时没有查到相关资料,不确定是把null这个字段直接丢失了还是变成别的字符了,如果有知道的同学欢迎指导~