更多

Question

我有一个表单，我需要验证onChange事件的所有字段。我一般处理onChange事件，但我如何一般性地验证这些字段？这就是我所做的

class Service extends React.PureComponent {
  state = {
    APIKey: '',
    APISecret: '',
    errors: {}
  };

  handleChange = event => {
    let nextState = Object.assign({}, this.state, {
      [event.target.name]: event.target.value
    });
    this.setState(this.validateField(nextState));
  };

  validateField(state) {
    console.log('state', state);
    // let errors = {};
    // if (state.cloudName.length === 0) {
    //   errors.cloudName = 'Cloud Name cannot be empty';
    // }
    // return Object.assign({}, state, errors);
  }


  render() {
    const { APIKey, APISecret, errors } = this.state;
    return (
      <form>
        <TextFieldGroup
          id="formControlsText"
          name="APIKey"
          type="text"
          value={APIKey}
          label="API Key"
          placeholder="Enter API Key"
          onChange={this.handleChange}
          required
        />
        <TextFieldGroup
          id="formControlsText"
          name="APISecret"
          type="text"
          value={APISecret}
          label="API Secret"
          placeholder="Enter API Secret"
          onChange={this.handleChange}
          required
        />
        <button className="btn btn-primary">Save changes</button>
      </form>
    );
  }
}

export default Service;

任何人都可以指导我按照我想要的方式处理验证的方式吗？

更新

handleChange = event => {
  let nextState = Object.assign({}, this.state, {
    [event.target.name]: event.target.value
  });
  this.setState(this.validateField(nextState));
};

validateField(state) {
  console.log('state', state);
  const validate = ['APIKey', 'APISecret'];
  let validation = validate.forEach(field => {
    if (state[field].length === 0) {
      state.errors[field] = 'This field cannot be empty';
    }
  });
  console.log(validation);
  return Object.assign({}, state);
}

使用上面的代码，如果我触摸任何字段并写入一些文本，错误将显示在其他字段上。如果我写了一些文字，错误就不会消失。

Answer 1

请指导我按照我想要的方式处理验证的方式

有一个类似的结构：

{
  'fieldName': [validator1, validation2, ...]
}

然后您可以按顺序运行这些验证器。每个验证器都可以是value => Error | null

更多

Formstate附带类型定义并处理此类验证（即使用简单的value => Promise<string | null>函数）

Answer 2

我可以通过以下方式执行此操作

  handleChange = event => {
    const fieldName = event.target.name;
    this.setState({ [event.target.name]: event.target.value }, () => {
      this.validateField([fieldName]);
    });
  };

  handleBlur = event => {
    const fieldName = event.target.name;
    this.validateField([fieldName]);
  };


  validateField = validate => {
    const errors = { ...this.state.errors };
    console.log(errors, validate);
    let hasError = false;
    validate.forEach(field => {
      if (this.state[field].length === 0) {
        hasError = true;
        errors[field] = `${field} cannot be empty`;
      } else {
        errors[field] = '';
      }
    });
    this.setState({ errors });
    return !hasError;
  };

  handleSubmit = event => {
    event.preventDefault();
    if (this.validateField(['APIKey', 'APISecret'])) {
      console.log('you can now submit the data');
    }
  };

我认为将validateField作为validate.js并调用该函数会更好。但我不知道如何使用validateField函数中使用的状态，如果我单独保留它，所以我可以在任何需要的地方调用此函数。请随时分享您的想法。

一般在reactjs中验证字段

2 个答案:

更多