當用戶從 React 的下拉列表中選擇一個選項時如何啟用另一個輸入字段

Question

如果用戶從下拉列表中選擇其他選項，我正在嘗試啟用另一個輸入字段，並且我嘗試向輸入字段添加一個狀態，該狀態根據從下拉列表中選擇的值設置為 true/false，但我不是當我選擇其他時能夠查看輸入選項。

const [designation, setDesignation] = useState("");
const [showOption, setShowOption] = useState(false);

<div className="field">
  <label className="label">Designation</label>
  <div className="control ">
    <select
      className="input"
      id="designation"
      name="Your Designation"
      value={designation}
      type="text"
      onChange={(e) => {
        setDesignation(e.target.value);
        if (value == "3") setShowOption(true);
        else setShowOption(false);
      }}
      placeholder="Your Designation"
      required
    >
      <option value="1">Product Manager</option>
      <option value="2">Developer</option>
      <option value="3">Other</option>
    </select>
  </div>
</div>;
{
  showOption ? (
    <div className="field">
      <label className="label">Designation</label>
      <div className="control ">
        <input
          className="input"
          id="designation"
          value={designation}
          type="text"
          onChange={(e) => setDesignation(e.target.value)}
          placeholder="Your Designation"
          required
        />
      </div>
    </div>
  ) : (
    ""
  );
}

Answer 1

您必須像這樣更改onchange功能。

onChange={(e) => {
  setDesignation(e.target.value);
  if (e.target.value == "3") setShowOption(true);
  else setShowOption(false);
}}

以及 HTML 部分的一些細微變化。

{
  showOption && <div className="field">
    <label className="label">Designation</label>
    <div className="control ">
      <input
        className="input"
        id="designation"
        value={designation}
        type="text"
        onChange={(e) => setDesignation(e.target.value)}
        placeholder="Your Designation"
        required
      />
    </div>
  </div>
}

它對我有用。 請嘗試一下，讓我知道它是否有效。