javascript - 当用户从 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>
}

这对我来说有效。请尝试一下，让我知道是否有效。