reactjs - 在 Antd 表单中切换可见性
问题描述
I need to display certain inputs when an option from the dropdown menu is selected. 下拉菜单包含三个选项,血压、体重和温度。当用户选择一个选项时,与该选项相关的输入字段需要可见,其余的则隐藏。
例如,当用户选择血压时,收缩压和舒张压输入字段需要可见,温度和体重字段需要隐藏。
<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);
PS,请注意每个样式Form.Item
推荐阅读
- multithreading - 重置代码
- reactjs - 如何为 React 应用程序配置 Rollup?
- sql - Oracle case 缺少关键字
- python - TypeError:blit 的目标位置无效
- amazon-web-services - 哪个 AWS 托管策略包含创建 EKS 集群的权限?
- javascript - 加载组件未在 React.js 表单组件中呈现?
- java - 使用 JPA 使用本机查询填充 DTO
- android - 如何从另一个列表中的列表中拯救项目
- encoding - 在用户级别使用 UTF-8 编码启动 SAS 会话
- php - 如何在提交模式表单时禁用查询字符串出现在 url 上?