如果用户从下拉列表中选择“其他”选项,并且我尝试向输入字段添加一个状态,该状态根据从下拉列表中选择的值设置为 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>
) : (
""
);
}
最佳答案
您必须像这样更改 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>
}
这对我来说有效。请尝试一下,让我知道是否有效。
关于javascript - 当用户从 React 的下拉列表中选择一个选项时如何启用另一个输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68036166/