我知道这种方法在 React js 中不好。但我不知道如何用 React js 实现同样的效果。没有得到这样做的正确方法。 我有多个输入,我必须根据从下拉列表中选择的值隐藏和显示这些输入。
我正在为任何想要检查的人制作这个演示代码。 https://codesandbox.io/s/gracious-hertz-k2ttl8?file=/src/App.js:0-1084
App.js
const App = () => {
const getInput = (e) => {
let input = e.target.value;
let data = document.getElementsByClassName(input);
data.array.forEach((ele) => {
if (ele.style.display === "none") {
ele.style.display = "block";
}
});
};
return (
<>
<select onChange={getInput}>
<option value="Address">Address</option>
<option value="Name">Name</option>
<option value="Both">Name && Address</option>
</select>
<br />
<br />
<input
className="Address Both"
type="text"
name="city"
placeholder="City"
/>
<input
className="Address Both"
type="text"
name="pincode"
placeholder="pincode"
/>
<br />
<br />
<input
className="Name Both"
type="text"
name="firstName"
placeholder="First Name"
/>
<input
className="Name Both"
type="text"
name="firstName"
placeholder="Last Name"
/>
</>
);
};
export default App;
最佳答案
您可以使用状态来存储所选值,然后根据该状态呈现输入:
const App = () => {
const [selected, setSelected] = useState("");
const getInput = (e) => {
setSelected(e.target.value);
};
return (
<>
<select onChange={getInput}>
<option value="Address">Address</option>
<option value="Name">Name</option>
<option value="Both">Name && Address</option>
</select>
<br />
<br />
{selected === 'Address'&&<input
className="Address Both"
type="text"
name="city"
placeholder="City"
/>}
// Similarly for the other inputs
</>
);
};
关于reactjs - 如何在 React Js 中有条件地隐藏和显示输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73273649/