逻辑与（&&）和或（||）运算符混淆

Question

我仍然对逻辑运算符感到困惑。我的情况是我正在使用 React.js 组件，如下所示：

const Component = () => {
   const [data, setData] = useState({
      date: "",
      value: "",
   })

   const [disabled, setDisabled] = useState(true);

  useEffect(() => {
    if (data.date !== "" && data.value !== "") {
      setDisabled(false);
    } else if (data.date === "" || data.value === "") {
      setDisabled(true);
    }
  }, [data.date, data.value]);

  return <Button disabled={disabled} />
}

所以我这里的情况是我有一个由 date 和 value 组成的状态，我在其中接收来自用户的输入。如果其中一个状态（date 或 value）的输入为空，我希望禁用该按钮。根据我的理解，逻辑运算符应该是正确的。现在发生的是 Button 将在两个输入都被填充后启用。但是，如果我清空其中一个字段，它不会被禁用。只有当我清空两个输入字段时，Button 才会被禁用。我在这里做错了什么？提前谢谢你

更新我是如何改变状态的：

const handleDate = (_, dateString) => {
   setData({...data, date: dateString});
}

<DatePicker onChange={handleDate} />
<InputNumber onChange={(value) => {setData({...data, value: value})} />

*注意：我正在使用 Ant Design Input 和 Datepicker

Answer 1

如果没有日期或没有价值，您可以设置。

setDisabled(!data.date || !data.value);

Answer 2

Or表示至少其中之一。 AND 表示两者同时。

因此您的 OR (data.date === "" || data.value === "") 表示当其中至少一个为空时为真；因此禁用。而你的 AND (data.date !== "" && data.value !== "") 意味着如果它们同时不为空则为真，在其他情况下为假。

Answer 3

而不是使用

else if

使用

useEffect(() => {
if (data.date !== "" && data.value !== "") {
  setDisabled(false);
} else {
  setDisabled(true);
}

}, [data.date, data.value]);

我假设您在更改日期和值时正确使用了 useState。请让我们更新 ;-)

逻辑与（&&）和或（||）运算符混淆

Logical AND (&&) and OR (||) operators confusion

javascript

logical-operators

reactjs