Toggle visibility in Antd form

家住魔仙堡 提交于 2021-02-08 08:20:45

问题


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>

回答1:


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., Please note style in each Form.Item



来源:https://stackoverflow.com/questions/55254147/toggle-visibility-in-antd-form

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!