Переключить видимость в форме 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);

PS, обратите внимание на стиль каждого Form.Item