Question

将此视为我的反应状态

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

现在，我想在单击按钮时切换状态，如果事件等于我状态下的键（a，b，c，d，e），则我希望它为true并保持为false。目前我正在做的是..

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

我该怎么办？

Answer 1

您可以通过以下代码进行操作：

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

Answer 2

这里有一线。

使用Object.keys()从对象获取键数组，然后遍历该数组以检查事件是否等于状态。如果找到，则状态为真，否则为假；

let event = 'c'
let state = { a: true, b: false, c: false, d: false, e: false }
Object.keys(state).forEach(s => state[s] = s === event)
console.log(state)

Answer 3

您可以这样做

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

Answer 4

另一种方法

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});

Answer 5

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

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

或基于this.state对象中的键

for (let key in this.state) obj[key] = false;

接下来将条件成立的状态设置为true

obj[event] = true;

现在设置状态

this.setState(obj);

PS：由于我还没有添加验证，因此您应该在这里处理可能会破坏代码的错误和事件。

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

Answer 6

好吧，你可以那样做。

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

因此，如果event ===“ a”，则它将仅setState for a 对于b，c，d和e同样，这一条件将为您设置所有状态。

Answer 7

听起来您可能在对状态进行低效建模-如果始终存在一个真实值，而其他所有内容都是错误的，则只需执行以下操作即可：

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

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

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

切换反应状态

7 个答案: