代码之家  ›  专栏  ›  技术社区  ›  Adam Krawesky

为什么meta.touch对于第三方组件总是错误的?

  •  3
  • Adam Krawesky  · 技术社区  · 6 年前

    使用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>
        );
      }
    }
    
    1 回复  |  直到 6 年前
        1
  •  9
  •   Adam Krawesky    6 年前

    我像往常一样回答自己的问题。

    我不得不宣传 onBlur() 事件也是,这是有意义的,因为 touched 文档中说,只有在用户输入并将焦点放在输入上之后,这才是真的。

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