当选择下拉菜单中的选项时，我需要显示某些输入。下拉菜单包含三个选项：血压、体重和温度。当用户选择一个选项时，与该选项相关的输入字段需要可见，而其余的则需要隐藏。
例如，当用户选择“血压”时，收缩压和舒张压输入字段需要可见，而温度和体重字段需要隐藏。
<Form.Item label="Vital">
{getFieldDecorator("vital", {
rules: [{ required: true, message: "Please select a vital!" }]
})(
<Select placeholder="Select a option">
<Option value="bloodPressure">Blood Pressure</Option>
<Option value="bodyWeight">Body Weight</Option>
<Option value="bodyTemperature">Body Temperature</Option>
</Select>
)}
</Form.Item>
<Form.Item label="Weight">
{getFieldDecorator("weightValue", {
rules: [
{
required: true,
message: "Please input a weight"
}
]
})(<Input placeholder="Weight Value" />)}
</Form.Item>
<Form.Item label="Temperature">
{getFieldDecorator("tempValue", {
rules: [
{
required: true,
message: "Please input your oral temperature"
}
]
})(<Input placeholder="Temperature Value" />)}
</Form.Item>
<Form.Item label="Systolic">
{getFieldDecorator("systolic", {
rules: [
{
required: true,
message: "Please input the Systolic value"
}
]
})(<Input placeholder="Systolic Value" />)}
</Form.Item>
<Form.Item label="Diastolic">
{getFieldDecorator("diastolic", {
rules: [
{
required: true,
message: "Please input the Diastolic value"
}
]
})(<Input placeholder="Diastolic Value" />)}
</Form.Item>
您可以使用 css 属性display: none， 隐藏Input特定条件下的字段。例如，您可以使用条件（vital被选择的选项）：
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="App">
<Form.Item label="Vital">
{getFieldDecorator("vital", {
rules: [{ required: true, message: "Please select a vital!" }]
})(
<Select placeholder="Select a option">
<Option value="bloodPressure">Blood Pressure</Option>
<Option value="bodyWeight">Body Weight</Option>
<Option value="bodyTemperature">Body Temperature</Option>
</Select>
)}
</Form.Item>
<Form.Item label="Weight" style={vital !== 'bodyWeight' ? { display: 'none'} : {''}}>
{getFieldDecorator("weightValue", {
rules: [
{
required: true,
message: "Please input a weight"
}
]
})(<Input placeholder="Weight Value" />)}
</Form.Item>
<Form.Item label="Temperature" style={vital !== 'bodyTemperature' ? { display: 'none'} : {''}}>
{getFieldDecorator("tempValue", {
rules: [
{
required: true,
message: "Please input your oral temperature"
}
]
})(<Input placeholder="Temperature Value" />)}
</Form.Item>
<Form.Item label="Systolic" style={vital !== 'bloodPressure' ? { display: 'none'} : {''}}>
{getFieldDecorator("systolic", {
rules: [
{
required: true,
message: "Please input the Systolic value"
}
]
})(<Input placeholder="Systolic Value" />)}
</Form.Item>
<Form.Item label="Diastolic" style={vital !== 'bloodPressure' ? { display: 'none'} : {''}}>
{getFieldDecorator("diastolic", {
rules: [
{
required: true,
message: "Please input the Diastolic value"
}
]
})(<Input placeholder="Diastolic Value" />)}
</Form.Item>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
P.S.，请注意每个的风格Form.Item
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
