以Antd形式切换可见性

Question

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

例如，当用户选择“血压”时，“收缩压”和“舒张压”输入字段必须可见，“温度”和“体重”字段需要隐藏。

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

Answer 1

您可以使用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

中的样式