С окончательной формой реагирования, почему meta.touched всегда ложно с сторонними компонентами?

Question

Используя final-form, у меня есть сторонний компонент ввода. я написал адаптер для него. он также имеет валидатор, но meta.touched всегда ложно. Я пытался распространять событие onFocus до входа, но не повезло. Что я делаю неправильно?

const requiredValidator = value => (value ? undefined : 'is required');

const FloatingLabelInputAdapter = ({ input, meta, ...rest }) => (
  <FloatingLabelInput
    {...rest}
    onChange={(event) => input.onChange(event)}
    onFocus={(event) => input.onFocus(event)}
    errorText={meta.touched ? meta.error : ''}
  />
)

// used like this:

<Field
  component={FloatingLabelInputAdapter}
  label="Email"
  name="email"
  type="text"
  validate={requiredValidator}
/>

// and here's the render() of the component


  render() {
    const { children, label } = this.props;
    const { focussing, used } = this.state;

    console.log('FloatingLabelInput.props', this.props);

    return (
      <Group {...this.props} >
        <TextInput
          focussing={focussing}
          innerRef={(comp) => { this.input = comp }}
          onFocus={this.onFocusHandle}
          onBlur={this.onBlurHandle}
          onChange={this.onChange}
          type={this.props.type} />

        <Label
          focussing={focussing}
          used={used}>

          {label}
        </Label>

        <Bar focussing={focussing} />
      </Group>
    );
  }
}

Answer 1

Как обычно, я отвечаю на свой вопрос.

я должен был распространять onBlur() событие, которое имеет смысл, так как touched Документы говорят, что это правда только после того, как пользователь вошел и оставил фокус на вводе.

<FloatingLabelInput
   ...
   onBlur={(event) => input.onBlur(event)}
/>