У меня есть форма, написанная на Формике. Мне нужно показать / скрыть «текстовое» поле в зависимости от значения (параметра), выбранного в поле «выбрать». как я могу этого добиться?

<Formik
                                initialValues={{transactionCategory, name}}
                                onSubmit={this.onSubmit}
                                validateOnChange={false}
                                validateOnBlur={false}
                                validate={this.validate}
                                enableReinitialize={true}
                        >
                            {
                                (props) => (
                                        <Form>

                                            <fieldset className="form-group">
                                                <label>Category</label>
                                                <Field name="transactionCategory" component="select">
                                                    <option value="Admission">Admission</option>
                                                    <option value="Class_Fee">Class Fee</option>
                                                    <option value="Staff_Payment">Staff Payment</option>
                                                    <option value="Other">Other</option>
                                                </Field>
                                            </fieldset>

                                            <fieldset className="form-group">
                                                <label>Name</label>
                                                <Field className="form-control" type="text" name="name"/>
                                            </fieldset>

                                            <button className="btn btn-success" type="submit">Save</button>
                                            &nbsp;
                                            <button type="reset" className="btn btn-secondary">Reset</button>
                                        </Form>
                                )
                            }
                        </Formik>

Когда я выбираю значение «Другое» в параметрах «Категория», поле «Имя» должно скрываться.

11
Dushan 16 Окт 2019 в 13:02

2 ответа

Условное отображение поля имени с использованием значения transactionCategory

<Formik
    initialValues={{ transactionCategory, name }}
    onSubmit={this.onSubmit}
    validateOnChange={false}
    validateOnBlur={false}
    validate={this.validate}
    enableReinitialize={true}
>
    {props => (
        <Form>
            <fieldset className="form-group">
                <label>Category</label>
                <Field name="transactionCategory" component="select">
                    <option value="Admission">Admission</option>
                    <option value="Class_Fee">Class Fee</option>
                    <option value="Staff_Payment">Staff Payment</option>
                    <option value="Other">Other</option>
                </Field>
            </fieldset>

            {props.values.transactionCategory !== "Other" && (
                <fieldset className="form-group">
                    <label>Name</label>
                    <Field className="form-control" type="text" name="name" />
                </fieldset>
            )}

            <button className="btn btn-success" type="submit">
                Save
            </button>
            &nbsp;
            <button type="reset" className="btn btn-secondary">
                Reset
            </button>
        </Form>
    )}
</Formik>;
6
wkgalla 16 Окт 2019 в 13:22

Напишите событие onSelect / onchange опции и на основе выбранного значения опции. Обновите поле состояния.

this.setState ({isName: true})

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

1
Harsh Mishra 16 Окт 2019 в 13:14