Javascript 使用React具有3种状态的按钮

我需要一个有三种状态的按钮

每个状态都需要处理单击并发送一个值

用例是：

• 不喜欢
• 宠儿
• 超级宠儿

我尝试使用

this.state.count+1

来指示级别，但没有成功。我也不确定这是最好的方法

我使用

const fill

作为CSS值（颜色），我将传递到

svg

元素中

这是我的尝试，但它是有限的，因为

已选中

只有2个状态（开/关），我需要3个。它也在中国

类开关扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
选中：！！道具已选中
};
}
handleClick（e）{
这是我的国家({
选中：！this.state.checked
});
}
渲染（）{
常量填充=this.state.checked？”#E1E0DD:“#999999”；
返回(
);
}
}
常量应用=（）=>(
)
React.render（，document.getElementById（“页面”）；

您的代码有几个问题

首先，不要从组件的道具派生组件的状态-这是一种反模式

其次，因为setState调用可以通过React批处理，所以在基于以前的状态创建新状态时，应该使用

函数（prevState，nextrops）

参数来设置状态，而不是对象

第三，正如上面的评论所提到的，使用布尔运算永远无法得到三个状态

我将实现如下内容：

class TripleSwitch extends React.Component {
  constructor() {
    super();
    this.state = {
       favourite: 0
    }
  }

  handleClick() {
    this.setState((prevState) => ({
       favourite: (prevState.favourite + 1) % 3
    }));
  }

  render () {
    const { favourite } = this.state;
    const fill = favourite === 0 ? "#E1E0DD" :
                 favourite === 1 ? "#000444" : 
                 "#999999";
    return (
        <button className="switch" onClick={this.handleClick.bind(this)} >
      <svg width="100" height="100">
        <g>
          <path id="svg_2" d="m0,38l37,0l11,-38l11,38l37,0l-30,23l11,38l-30,-23l-30,23l11,-38l-30,-23l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill={fill} />
        </g>
      </svg>
            </button>
    );
  }
}

类TripleSwitch扩展了React.Component{
构造函数（）{
超级（）；
此.state={
收藏夹：0
}
}
handleClick（）{
this.setState（（prevState）=>({
收藏夹：（prevState.Favorite+1）%3
}));
}
渲染（）{
const{favorite}=this.state；
const fill=favorite==0？#E1E0DD”：
收藏夹===1？”#000444”：
"#999999";
返回(
);
}
}

我分叉了

布尔值为1或0。如果需要3个状态，则需要增加一个值

  handleClick(e) {
    var count = this.state.count;
    count = count !== 3 ? count + 1 : 0;
    this.setState({
      count: count
    });
  }

还应将填充颜色的逻辑分开：

function fillColor(count) {
    var fill = "";
    if(count === 1) fill = "#E1E0DD";
    if(count === 2) fill = "#999999";
    if(count === 3) fill = "#000";
    return fill;
}

---

你为什么要把道具转换成布尔值？你为什么一开始就用布尔值？而且，三元运算符不是这样工作的！你甚至没有通过一个

计数
道具！我将我的答案更新为我最初的尝试，我使用了
复选框
。但是这限制了我当你有3个状态时，传递布尔值有什么意义？布尔值有两个可能的值，true和false，这是不够的！用一个整数或什么的！是的，这就是为什么我发布了SO，所以我可以看到一个关于如何完成这个简单任务的最佳使用示例—只需添加模运算符
int%3===1
依此类推。谢谢<代码>常量收藏夹={this.state}给出一个意外标记。我的错误，括号在作业的错误一侧。我编辑过，太好了。我的最后一个问题是，如何根据按钮的状态发送不同的值？例如发送值1、2、3和句柄提交？如果您是从该组件内发送请求，则是只发送
this.state.favorite
，其值为0、1或2。如果您有一个处理提交的父组件，则需要将其发送到父组件中。
function fillColor(count) {
    var fill = "";
    if(count === 1) fill = "#E1E0DD";
    if(count === 2) fill = "#999999";
    if(count === 3) fill = "#000";
    return fill;
}