如何在reactjs中正确定义三元运算？

Question

我正在尝试做一个能做到的功能

如果X为真 然后调用setFalse函数 否则不要调用setFalseFunction

    this.state = {
      X: true,
      Y: true,
      Z: true,
    };
  }

  setFalse() {

    this.setState({

      X: true ? this.setState.setFalse() : !this.setState.setFalse()),
      Y: true ? this.setState.setFalse() : !this.setState.setFalse()),
      Z: true ? this.setState.setFalse() : !this.setState.setFalse())

    });
  }

但这似乎不起作用，我也尝试过X = true？而不是X：是？还是没有运气。

Answer 1

如果要执行此操作-> “如果X为真，则调用setFalse函数，否则不要调用setFalseFunction”

然后，您不需要setState，因为您不会更改变量（X，Y，Z）的状态！您只想验证它们是否正确，如果是，则要调用函数setFalse，对吗？

您可以通过简单的操作来实现，例如：

class App extends React.Component {
  state = {
    X: true,
    Y: true,
    Z: true,
  }

  setFalse() {
    console.log('I was called')
  }

  render() {
    const {X} = this.state

    return <div>{ X ? this.setFalse() : null }</div>
  }
}

现在，如果要调用setFalse并更改变量的状态，则需要进入函数并执行以下操作：

  setFalse() {
    console.log('I was called')

    this.setState({
      X: false,
    })
  }

打开您的开发工具并查看状态的变化，得到一个工作here的示例

我建议您在React和study it

中了解有关生命周期的一些信息

Answer 2

首先，不是要使用setState()，如果您想要一种可以使false声明为全部的方法，则需要执行以下操作：

this.state = {
  X: true,
  Y: true,
  Z: true,
};

// Change all the states to "false", without checking then
setFalse = () {
  this.setState({ X: false, Y: false, Z: false });
};

如果要检查每个状态的当前值，然后根据此值分配一个新值，则可以执行以下操作：

setFalse = () => {
  const { X, Y, Z } = this.state;

  // If the states are "true", change them to "false"
  this.setState({ X: X ? !X : X, Y: Y ? !Y : Y, Z: Z ? !Z : Z });
};