小编Dus*_*han的帖子

如何根据另一个表单字段动态显示隐藏 Formik 表单字段

我有一个用 Formik 编写的表格。我需要根据在“选择”字段中选择的值(选项)来显示/隐藏“文本”字段。我怎样才能做到这一点?

<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>
Run Code Online (Sandbox Code Playgroud)

当我从“类别”选项中选择值“其他”时,应隐藏“名称”字段。

reactjs formik

11
推荐指数
2
解决办法
1万
查看次数

标签 统计

formik ×1

reactjs ×1