reactjs - 未捕获的类型错误：_this.props.validatorListener 不是函数

Question

我正在使用库在我的 material-ui TextField 中实现表单验证react-form-validator-core，如下所示：

它看起来就像文档示例，我在其中扩展了 ValidatorComponent。isValid这允许从父状态 访问不同的道具。

文本输入组件

class TextInput extends ValidatorComponent {
  /**
   * render the component
   * @returns {object} JSX
   */
  render() {
    const {
      variant,
      id,
      label,
      autoFocus,
      multiline,
      rows,
      error,
      errorMessages,
      validators,
      requiredError,
      helperText,
      withRequiredValidator,
      ...rest
    } = this.props;

    const { isValid } = this.state;

    return (
      <TextField
        {...rest}
        fullWidth
        margin="normal"
        variant={variant}
        id={id}
        name={id}
        label={label}
        autoFocus={autoFocus}
        multiline={multiline}
        rows={rows}
        error={!isValid || error}
        helperText={(!isValid && this.getErrorMessage()) || helperText}
      />
    );
  }
}

TextInput.propTypes = {
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  error: PropTypes.bool,
  helperText: PropTypes.string,
  variant: PropTypes.string,
  autoFocus: PropTypes.bool,
  multiline: PropTypes.bool,
  rows: PropTypes.string,
};

TextInput.defaultProps = {
  error: false,
  helperText: undefined,
  variant: 'outlined',
  autoFocus: false,
  multiline: false,
  rows: '8',
};

export default TextInput;

我的表格

我正在使用 Vali

<ValidatorForm
 className={classes.form}
  autoComplete="off"
  noValidate
  onSubmit={this.handleSubmit}
>
  <TextInput
    id="email"
    label="Email"
    autoFocus={false}
    onChange={this.onChange}
    value={email}
    validators={['required', 'isEmail']}
    errorMessages={['this field is required', 'email is not valid']}
  />
  <Box marginTop={2}>
    <Button variant="contained" type="submit" className="button" fullWidth>
      send message
    </Button>
  </Box>
</ValidatorForm>

问题

我不明白为什么每次在 TextField 上输入值时，都会收到此错误。我想知道将这个库与 material-ui 一起使用的有效方法。

下面是这两个函数的实现方式

改变

onChange = e => {
    e.preventDefault();
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  };

处理提交

  handleSubmit() {
    const { email } = this.state;
    console.log(email);
  }

标签： reactjsvalidation