react-final-form - 传递类型“复选框”未使用 react-final-form 注册

Question

我遇到了一个问题react-final-form，它告诉我我没有通过，type=checkbox所以它无法正确解包。我有点困惑，因为在示例中自定义组件确实得到了type传递给它。一个活生生的例子可以在下面找到：

https://codesandbox.io/s/9o227yp3q4

我看到的是输入以未定义状态开始，然后在用户输入时切换为真或假。从未定义的状态开始，我认为是导致问题的原因，但我并不积极。

我收到的错误消息是

Warning: You must pass `type="checkbox"` prop to your Field(attendees[0].isHost) component. Without it we don't know how to unpack your `value` prop - "undefined".

Answer 1

我发现我需要传递typeon<Field />以便react-final-form可以解压这些值并正确应用它们。

export const CustomField: React.SFC<Props> = ({
  label,
  name,
  placeholder,
  type
}) => (
   <Field name={name} type={type}>
     {({ input, meta }) => (
       <div>
        <StyledLabel htmlFor={name}>{label}</StyledLabel>
        <StyledInput
          {...input}
          id={name}
          placeholder={placeholder}
          type={type}
        />
       {meta.error && meta.touched && <span>{meta.error}</span>}
      </div>
     )}
   </Field>

)