React新手如何在handleChange中实现三种动态CSS类切换效果

解决方法 #

你当前的问题核心是用布尔类型存储状态，最多只能支持两种切换逻辑，要实现三种CSS类的切换，直接存储选中的数值即可，一共需要修改三处代码：

1. 修改state初始值 #

将state中value字段的布尔类型初始值改为数字类型，对应你需要的初始状态：

constructor() {
  super();
  this.state = {
    isLoaded: false,
    listData: [],
    list2Data: [],
    list3DataRaw: [],
    list3Data: [],
    value: 1 // 替换原来的value: true
  };
}

2. 重写handleChange中的状态赋值逻辑 #

删掉原来把选中值转成布尔值的判断，直接将选中的数值存入state：

handleChange = ({ target }) => {
  const selectVal = Number(target.value);
  const list = [...this.state.list3DataRaw];
  const updateList = list.filter(item => item.userId == selectVal);
  this.setState({
    value: selectVal,
    list3Data: updateList
  });
};

3. 修改className动态绑定规则 #

将原来的二元三元判断改成支持三个分支的判断逻辑，匹配你的需求：

<select
  id="selectLocationn"
  className={
    this.state.value === 1 
      ? 'badge-primary' 
      : this.state.value === 2 
        ? 'badge-secondary' 
        : 'badge-danger'
  }
  value={locationss.value}
  onChange={this.handleChange}
>

后续如果需要新增更多状态对应的CSS类，只需要在className的判断分支中新增对应条件即可，无需修改底层存储逻辑。

内容的提问来源于stack exchange，提问作者HelloWorld1