react-final-form 中的自定义输入验证

问题描述

我已经设置了一个自定义的 TimePicker 组件，我想将其连接到 react-final-form。

表格

<Form
  onSubmit={onSubmit}
  render={({ handleSubmit,form,submitting,pristine }) => (
    <form onSubmit={handleSubmit}>
      <Field
        id="time"
        name="time"
        label="Time"
        component={TimePicker.Adapter}
      />
      <Button
        disabled={submitting || pristine}
        color="primary"
        variant="contained"
        type="submit"
      >
        Submit
      </Button>
    </form>
  )}
/>

时间选择器

// Adapter for https://final-form.org/
const TimePickerAdapter = ({ input,Meta,...rest }) => (
  <TimePicker
    {...input}
    {...rest}
    value={input.value === '' ? null : input.value}
    onChange={value => input.onChange(value)}
    error={(Meta.error || Meta.submitError) && Meta.touched}
    errorText={Meta.touched ? Meta.error || Meta.submitError : ''}
  />
);

// TimePicker implementation goes here..
function TimePicker(props) { ... }

TimePicker.Adapter = TimePickerAdapter;
export default TimePicker;

对于外部 Field-Level-Validation，我会将 validate prop 添加到 <Field />。例如：

const required = value => (value ? undefined : 'required')

<Field
  id="time"
  name="time"
  label="Time"
  validate={required}
  component={TimePicker.Adapter}
/>

但我需要一个内部验证来传递给 <Form />。例如，TimePicker 是一个 input，它期望像 1000 (=> 10:00) 这样的值但是有一个像 9999 这样的输入显然不是一个有效的输入，因为最长可用时间为 2359。

我想在自定义输入组件/适配器中触发表单错误。有没有办法执行此操作？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）