Проблема с раскрывающимся списком в SPFX React Webpart с Formik и Fluent UI - PullRequest
Новая
       70

Проблема с раскрывающимся списком в SPFX React Webpart с Formik и Fluent UI

0 голосов
/ 14 июля 2020

Я относительно новичок в SPFX WebPart + React + Fluent UI, и я ищу решение для использования раскрывающегося поля в форме. В настоящее время возникает ошибка, если я добавляю раскрывающийся список, как в описании пользовательского интерфейса Fluent.

Type '{placeholder: string; метка: строка; варианты: IDropdownOption []; требуется: true; } 'отсутствуют следующие свойства из типа' FieldProps ': field, form, meta

Код выглядит так: 

<Stack tokens={stackTokens}>
   <TextField name="teamName" label="Team Name" />
   <TextField name="description" label="Description" multiline rows={3} />
   <FormikDropdown
      placeholder="Select an option"
      label=" Template"
      options={options}
      required
      {...mapFieldToChoiceGroup(fieldProps)}
    />
    <TextField // prettier-ignore
       label="Url"
       prefix="https://"
       style={selectedValue == "test" ? {display:"none"}:{display:"block"}}
    />
 </Stack>

Я не знаю, где из formik я могу получить этот реквизит для выпадающего компонента ...

Вторая проблема связана с проверкой текстового поля. Если я хочу скрыть поле с меткой «URL», как я могу сделать это динамически на основе выбора?

Пример полного кода: 

import { Card, CardContent, Step, StepLabel, Stepper } from '@material-ui/core';
import { Form, Formik, FormikConfig, FormikValues } from 'formik';
import { FormikDropdown, mapFieldToChoiceGroup } from 'formik-office-ui-fabric-react';
import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownStyles } from 'office-ui-fabric-react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { PrimaryButton } from 'office-ui-fabric-react/lib/components/Button/PrimaryButton/PrimaryButton';
import Stack from 'office-ui-fabric-react/lib/components/Stack/Stack';
import { TextField } from 'office-ui-fabric-react/lib/components/TextField/TextField';
import * as React from 'react';
import { useState } from 'react';
import { mixed, number, object } from 'yup';

export default function Home() {
    return (
        <Card>
            <CardContent></CardContent>
            <FormikStep label="Team Information">
                <Stack tokens={stackTokens}>
                    <TextField name="teamName" label="Team Name" />
                    <TextField name="description" label="Description" multiline rows={3} />
                    <FormikDropdown
                        placeholder="Select an option"
                        label=" Template"
                        options={options}
                        required
                    />
                    <TextField // prettier-ignore
                        label="Url"
                        prefix="https://"
                        style={firstTextFieldValue == "test" ? { display: "none" } : { display: "block" }}
                    />
            </FormikStep>
                    </CardContent>
        </Card >
    );
}


export interface FormikStepProps
    extends Pick<FormikConfig<FormikValues>, 'children' | 'validationSchema'> {
    label: string;
}

export function FormikStep({ children }: FormikStepProps) {
    return <>{children}</>;
}

export function FormikStepper({ children, ...props }: FormikConfig<FormikValues>) {
    const childrenArray = React.Children.toArray(children) as React.ReactElement<FormikStepProps>[];
    const [step, setStep] = useState(0);
    const currentChild = childrenArray[step];
    const [completed, setCompleted] = useState(false);

    function isLastStep() {
        return step === childrenArray.length - 1;
    }

    return (
        <Formik
            {...props}
            validationSchema={currentChild.props.validationSchema}
            onSubmit={async (values, helpers) => {
                if (isLastStep()) {
                    await props.onSubmit(values, helpers);
                    setCompleted(true);
                } else {
                    setStep((s) => s + 1);
                }
            }}
        >
            {({ isSubmitting }) => (
                <Form autoComplete="off" translate="yes" onAuxClick={(e) => console.log("onAuxClick")} onAuxClickCapture={(e) => console.log("onAuxClickCapture")}>
                    <Stepper alternativeLabel activeStep={step}>
                        {childrenArray.map((child, index) => (
                            <Step key={child.props.label} completed={step > index || completed}>
                                <StepLabel>{child.props.label}</StepLabel>
                            </Step>
                        ))}
                    </Stepper>

                    {currentChild}

                    <Stack horizontal style={{ marginTop: "20px" }} tokens={btnStackTokens}>
                        {step > 0 ? (
                            <DefaultButton
                                disabled={isSubmitting}
                                allowDisabledFocus
                                onClick={() => setStep((s) => s - 1)}
                                text="Back"
                            />
                        ) : null}
                        <PrimaryButton
                            disabled={isSubmitting}
                            type="submit"
                        >
                            {isSubmitting ? 'Submitting' : isLastStep() ? 'Submit' : 'Next'}
                        </PrimaryButton>
                    </Stack>
                </Form>
            )}
        </Formik>
    );
}

Ура

...