Question

我今天注意到语义UI React并在Input组件内使用Form.Field组件以及error属性的用法时出现了问题：

const ScheduleTypeFields = ({ form }: FieldProps<JobEntryType>) => (
    <Form.Field>
        <Form.Input label='Schedule' required error={form.touched.schedule && form.errors.schedule}>
            <Input label={<Dropdown basic options={ScheduleTypes} name='cronType' id='cronType' onChange={(_, opts) => form.setFieldValue('cronType', opts.value)} onBlur={form.handleBlur} value={form.values.cronType} />}
                placeholder='Specify in CRON format, i.e. * * * * *'
                labelPosition='left' name='schedule' id='schedule' onChange={form.handleChange} onBlur={form.handleBlur} value={form.values.schedule} />
        </Form.Input>
    </Form.Field>
)

我面临的问题很简单：

Warning: Failed prop type: Invalid prop `error` supplied to `FormField`.
    in FormField (created by FormInput)
    in FormInput (created by ScheduleTypeFields)
    in div (created by FormField)
    in FormField (created by ScheduleTypeFields)
    in div (created by FormGroup)
    in FormGroup (created by ScheduleTypeFields)
    in ScheduleTypeFields (created by FieldInner)
    in FieldInner (created by Context.Consumer)
    in FormikConnect(FieldInner) (created by InnerJobForm)
    in form (created by Form)
    in Form (created by InnerJobForm)
    in InnerJobForm (created by Formik)
    in Formik (created by JobForm)
    in JobForm (created by CreateJob)
    in CreateJob (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in div (created by Container)
    in Container (created by App)
    in Router (created by App)
    in App

我认为问题在于error中Input的签名与error中Form.Field的签名，前者是boolean，而{之后的{1}}和any?会将Form.Field传递给error，因此出错。

我必须这样做，因为我的输入控件中有一个带有控件的自定义标签，我尝试使用嵌套的Input，但我做不到，也许我做错了什么？

欢呼

Answer 1

我认为您不能在Form.Input中使用Input组件，因为Form.Input呈现为html中的输入。因此，这意味着您最终将呈现出以下内容：

log_request

在语义上是错误的，并且也在纯HTML中报告错误。您应该以不同的方式重组代码。我建议将Input组件放在与Form.Input相同的级别上。

Form.Field错误和Input错误属性，属性类型有问题

1 个答案: