如何控制空輸入？

我正在 React 中創建我的第一個組件，但我在如何控制或檢測輸入何時為空的邏輯方面存在問題。

這個想法是根據其內容改變輸入的類，即

如果輸入不為空，則將邊框顏色更改為綠色，如果輸入為空，則將邊框顏色更改為灰色。

當輸入有文本時邏輯起作用，問題是當我洗掉內容時輸入什么都不做，直到我再次寫一封信，訊息“輸入為空”和“輸入資料”被激活

為什么？

登錄組件

const { useEffect, useState } = React;

const Login = function () {
  const [formState, setformState] = useState({
    isActive: true,
    inputEmail: "",
  });

  const { isActive, inputEmail } = formState;
  useEffect(
    function () {
      // console.log("hello");
    },
    [inputEmail]
  );

  const handleInputChange = function (e) {
    if (inputEmail == "") {
      console.log("input is empty");
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: false });
    } else {
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: true });
      console.log("input with data");
    }
  };

  return (
    <input type="text" name="inputEmail" className={`inputClass ${isActive ? "inputSelected" : ""}`} autoComplete="off" onChange={handleInputChange} />
  );
};
ReactDOM.render(<Login />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

uj5u.com熱心網友回復：

您應該檢查傳入的值e.target.value

  const handleInputChange = function (e) {
    if (e.target.value == "") {//<--
      console.log("input is empty");
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: false });
    } else {
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: true });
      console.log("input with data");
    }
  };

uj5u.com熱心網友回復：

您正在為邏輯使用 state 的最后一個值，因此它似乎總是落后一步。

您還應該默認您的狀態為isActive假，因為輸入值最初是假的。

相反，請使用e.target.value如下所示的新值：

我已將樣式更改為行內，并更改了影響背景的顏色，以便更清晰地演示。

const { useEffect, useState } = React;

const Login = function () {
  const [formState, setformState] = useState({
    isActive: false,
    inputEmail: "",
  });

  const { isActive, inputEmail } = formState;

  const handleInputChange = function (e) {
    if (e.target.value == "") {
      console.log("input is empty");
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: false });
    } else {
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: true });
      console.log("input with data");
    }
  };

  return (
    <input type="text" name="inputEmail" style={{ backgroundColor: isActive ? "green" : ""}} autoComplete="off" onChange={handleInputChange} />
  );
};
ReactDOM.render(<Login />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

簡化示例

根據您的要求，您可以顯著簡化此操作。

如果isActive總是反映是否inputEmail為空，那么您可以從狀態中省略它并在每次渲染時確定它。

這意味著您不需要條件，handleInputChange并且無論如何都可以以相同的方式更新它。

我還建議value明確設定輸入道具，而不是僅僅依靠它們保持同步。

const { useEffect, useState } = React;

const Login = function () {
  const [formState, setformState] = useState({
    inputEmail: "",
  });

  const { inputEmail } = formState;

  const handleInputChange = function (e) {
    setformState({ ...formState, [e.target.name]: e.target.value });
  };

  return (
    <input type="text" name="inputEmail" value={inputEmail} style={{ backgroundColor: !!inputEmail ? "green" : ""}} autoComplete="off" onChange={handleInputChange} />
  );
};
ReactDOM.render(<Login />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

標籤：javascript 反应

上一篇：如何將影像上傳到服務器目錄？

下一篇：solidity投票智能合約代碼