Блог

Мне нужно отображать определенные входные данные при выборе опции из выпадающего меню. Выпадающее меню состоит из трех параметров: кровяное давление, вес и температура. Когда пользователь выбирает опцию, поля ввода, относящиеся к этой опции, должны быть видны, а остальные скрыты.

Например, когда пользователь выбирает артериальное давление, поля ввода систолического и диастолического должны быть видны, поля температуры и веса должны быть скрыты.

 <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