Javascript 切换反应状态

将此视为我的反应状态

state = {
a: true,
b: false,
c: false,
d: false,
e: false 
}

现在，我想在单击按钮时切换状态，如果事件等于我状态中的键（a、b、c、d、e），我希望它为真，其余为假。目前我正在做的是

someEvent = (event) => {
if (event === "a") this.setState({a: true, b: false, c: false, d: false, e: false})
if (event === "b")this.setState({a: false, b: true, c: false, d: false, e: false})
....
....
....
}

我不希望将每个状态都写入/设置为false，而是希望与键相等的给定事件在我的状态中具有true值，其他所有内容都为false

---

我怎样才能做到这一点？

您可以通过以下代码做到这一点：

this.setState({
  a: event === "a",
  b: event === "b",
  c: event === "c",
  d: event === "d",
  e: event === "e"
});

---

可以将所有状态都初始化为false的对象

const obj = {};
for (let char = 'a'; char <= 'e'; char++) obj[char] = false;

接下来，无论哪种条件有效，都将状态设置为true

obj[event] = true;

现在设定状态

this.setState(obj);

PS：您应该处理可能破坏代码的错误和事件，因为我没有添加验证

---

PS（2）：这样可以节省时间，而不是自己编写每个if/else或switch语句。

您可以这样做

Object.keys( this.state )
        .map( Key => {
            if(event === this.state[Key]){
              this.setState({this.state[Key] : true});
            }else{
              this.setState({this.state[Key] : false});
            }
     } );
 })

---

你可以这样做

someEvent = (event) => {
    this.setState({ [event]: true })
}

因此，如果event==“a”，那么它将只为a设置状态 对于b、c、d、e也一样，这一个条件将为您设置所有状态。

这里是一个单行程序

用于从对象获取密钥数组，然后遍历该数组以检查事件是否等于状态。如果发现，则状态为真，否则为假

let event='c'
设state={a:true，b:false，c:false，d:false，e:false}
Object.keys（state）.forEach（s=>state[s]=s==event）
console.log（state）

听起来您可能对您的状态建模效率低下——如果总是有一个真值，而其他所有值都是假的，您可以简单地执行以下操作：

state = {
  currentlyTrue: a
}
someEvent = (event) => {
  this.setState({currentlyTrue: event})
}

如果您设置了当前状态模型，这应该可以工作。这里有一个

另一种方法

let updateObject = [...this.state];
Object.keys( this.state )
        .map( Key => {
            if(event === this.state[Key]){
              updateObject[key] = true;
            }else{
              updateObject[key] = false;
            }
     } );
 });

this.setState({...this.state,updateObject});

---

@投否决票的人：想解释投否决票的原因吗？我似乎看不出这个答案有什么问题。我没有投反对票，但这需要写出每个州的财产。对于大量的属性，这可能会非常繁琐且容易出错。但是如果没有太多属性，这是一个很好的解决方案。你不认为调用

this.setState

获取状态中的任何键都会有性能问题吗？我已经稍微改进了我的答案，请检查。你不认为调用

this.setState

获取状态中的任何键都会有性能问题吗？我只是在打电话但是设置一次状态-我只是对previousState对象进行了修改，以使其在返回之前达到所需的最终结果。您不认为为状态中的任何键调用

this.setState

会有性能问题吗？我不太明白。我没有reactjs方面的背景，所以很抱歉，但我认为这个答案或多或少是有用的。在我看来，在代码末尾调用this.setState是可行的。如果你真的关心性能，我可以为你优化一下。我非常感谢你的回答。setState重新呈现我们的DOM（就像它与虚拟DOM比较并重新呈现更改一样）。不过，我对你的答案投了赞成票：）

someEvent = (event) => {
  this.setState((previousState) => {
    Object.keys(previousState).forEach((v) => { previousState[v] = false })
    previousState[event] = true
    return previousState;
  })
}

let updateObject = [...this.state];
Object.keys( this.state )
        .map( Key => {
            if(event === this.state[Key]){
              updateObject[key] = true;
            }else{
              updateObject[key] = false;
            }
     } );
 });

this.setState({...this.state,updateObject});