切换Antd形式的可见性

问题描述

从下拉菜单中选择一个选项后，我需要显示某些输入.下拉菜单包含三个选项:血压，体重和温度.当用户选择一个选项时，与该选项相关的输入字段必须是可见的，其余的则必须隐藏.

I need to display certain inputs when an option from the dropdown menu is selected. The dropdown menu consists of three options, Blood Pressure, Weight and Temperature. When the user selects an option, the input fields relating to that option need to be visible and the rest hidden.

例如，当用户选择血压"时，需要看到收缩和舒张输入字段，而必须隐藏温度"和体重"字段.

For example when the user selects Blood Pressure, the systolic and diastolic input fields need to be visible, the temperature and weight fields need to be hidden.

<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 ):

You can use css property display: none, to hide Input fields on certain condition. e.g you can use condition (vital being option selected):

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

P.S., Please note style in each Form.Item

这篇关于切换Antd形式的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！