基于条件的第三场

Question

我有一个项目，在这个项目中我有几个接口，在这些接口中有一个创建索引的接口，我有三个字段，第一个是名称，第二个是类型，我有20个类型，当类型为11或14时，我希望向我显示第三个字段，即“RefId”：

​

​

import React from 'react';
import FormElement from '../../../../common/form-element';
import { IFormProps } from '../../../../../interfaces/form-props';
import { Col, Row } from 'antd';
import Index from '../../../../../api/nuclearMedicineApi/services/Index';
import { useQuery } from 'react-query';
import { useIntl } from 'react-intl';

interface IndexFormProps extends IFormProps { }

const IndexForm: React.FC<IndexFormProps> = ({
    control,
    disabled,
    type,
    data
}) => {

    // console.log('data: ', data); 

    // Get All types
    const getAllIndexTypesQuery = useQuery('getAllIndexTypes', () =>
        Index.indexGetAllTypes(),
    );

    const getIndexGetAllLite = useQuery('getIndexGetAllLite', () =>
        Index.indexGetAllLite({ Type: data?.type?.value}),
    );

    const sharedProps = {
        control,
        disabled,
    };
    const { formatMessage } = useIntl();


    return (
        <div className='permissions p-8'>
            <Row>
                <Col span={24}>
                    <FormElement
                        {...sharedProps}
                        label={'indexName'}
                        type='input'
                        name={'name'}
                        required
                    />
                </Col>
                <Col span={24}>
                    <FormElement
                        {...sharedProps}
                        label={'indexType'}
                        type='select'
                        name={'type'}
                        options={
                            getAllIndexTypesQuery.data?.map((op) => ({
                                ...op,
                                label: formatMessage({ id: op?.label }),
                            }))
                        }
                        required
                    />
                </Col>
                {
                    // (data?.type?.value === 13 || data?.type?.value === 14 || data?.type?.label === 'SubTopography' || data?.type?.label === 'SubCity') ?
                    (type=== 'Create' && data?.type?.value === 13 || data?.type?.value === 14) ?
                    <Col span={24}>
                        <FormElement
                            {...sharedProps}
                            label={'refId'}
                            type='select'
                            name={'refId'}
                            options={
                                getIndexGetAllLite.data?.items?.map((op) => ({
                                    ...op,
                                    label: formatMessage({ id: op.label }),
                                }))
                            }
                            required
                        />
                    </Col>: ''
                }


                {type !== 'Create' && (
                    <>
                        <Col span={24} className={"m-8"}>
                            <FormElement
                                {...sharedProps}
                                label={'isActive'}
                                type='checkbox'
                                name='isActive'
                                disabled
                            />
                        </Col>
                    </>
                )}
            </Row>
        </div>
    );
};

export default IndexForm;

Answer 1

您可以使用一个onChange事件和一个像"hasExtraField“这样的状态来呈现额外的字段。

const Page = () => {
  const [hasExtraField, setHasExtraField] = useState(false);
  const handleOnChange = (id) => {
    if(id === 14 || id === 11) {
      setHasExtraField(true);
    }
  }


  return (

    <>  
      {...yourOtherFields}
      {hasExtraField && <input name="extraField" />}
    </>
  )
}