Reactjs 如何在react+中检查表单是否有效；材料？

是否有任何方法可以知道表单在react+material ui中是否有效。我在演示中使用react material。我的表单中有三个字段，所有字段都是必需的。我想在

submit

按钮上检查表单是否有效

这是我的密码

我不想使用任何插件

submitButtonHandler = () => {
    console.log("error");
    console.log(this.state.form);
  };

  render() {
    const { classes } = this.props,
      { form } = this.state;
    return (
      <div className={classes.searchUser__block}>
        <SearchForm
          handleInput={this.handleInputFieldChange}
          submitClick={this.submitButtonHandler}
          form={form}
        />
      </div>
    );
  }

submitButtonHandler=（）=>{
控制台日志（“错误”）；
log（this.state.form）；
};
render（）{
const{classes}=this.props，
{form}=this.state；
返回(
);
}

如果您不想使用任何库，则必须手动执行该验证。材料用户界面没有根据其文档内置的任何验证。但它确实为您提供了一些工具，例如errorMessage到文本字段。你只要玩它就行了

例如：

class PhoneField extends Component
  constructor(props) {
    super(props)
    this.state = { errorText: '', value: props.value }
  }
  onChange(event) {
    if (event.target.value.match(phoneRegex)) {
      this.setState({ errorText: '' })
    } else {
      this.setState({ errorText: 'Invalid format: ###-###-####' })
    }
  }
  render() {
    return (
      <TextField hintText="Phone"
        floatingLabelText="Phone"
        name="phone"
        errorText= {this.state.errorText}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

类PhoneField扩展组件
建造师（道具）{
超级（道具）
this.state={errorText:''，值：props.value}
}
onChange（事件）{
if（event.target.value.match（phoneRegex））{
this.setState（{errorText:'}）
}否则{
this.setState（{errorText:'无效格式：#####-##-###'）
}
}
render（）{
返回(
)
}
}

---

如果你不想使用任何库，那么你必须手动进行验证。材料用户界面没有根据其文档内置的任何验证。但它确实为您提供了一些工具，例如errorMessage到文本字段。你只要玩它就行了

例如：

class PhoneField extends Component
  constructor(props) {
    super(props)
    this.state = { errorText: '', value: props.value }
  }
  onChange(event) {
    if (event.target.value.match(phoneRegex)) {
      this.setState({ errorText: '' })
    } else {
      this.setState({ errorText: 'Invalid format: ###-###-####' })
    }
  }
  render() {
    return (
      <TextField hintText="Phone"
        floatingLabelText="Phone"
        name="phone"
        errorText= {this.state.errorText}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

类PhoneField扩展组件
建造师（道具）{
超级（道具）
this.state={errorText:''，值：props.value}
}
onChange（事件）{
if（event.target.value.match（phoneRegex））{
this.setState（{errorText:'}）
}否则{
this.setState（{errorText:'无效格式：#####-##-###'）
}
}
render（）{
返回(
)
}
}

---

这是一个有点过时的例子，如果必填字段为空，我会进行理想的表单验证

---

这是更新后的代码沙盒：

您好，如果必填字段为空，我已经进行了理想的表单验证

---

下面是更新后的代码沙盒：

表单验证可能非常复杂，因此我非常确定您最终会使用一个库。现在，为了回答您的问题，我们需要考虑表单提交流程。下面是一个简单的例子：

“预提交”

• 将

  isSubmitting

  设置为

  true

• 进入“验证”

“验证”

• 使用

  validationRules

• 有什么错误吗？
• 是：中止提交。设置错误，将

  isSubmitting

  设置为

  false

• 否：转至“提交”

“提交”

• 继续运行提交处理程序（即

  onSubmit

  或

  handleSubmit

  ）
• 将

  isSubmitting

  设置为

  false

一些最低限度的实现可能是：

// ...imports
import validateForm from "../helpers/validateForm";
import styles from "./styles";
import validationRules from "./validationRules";

const propTypes = {
  onSubmit: PropTypes.func.isRequired,
  onSubmitError: PropTypes.func.isRequired,
  initialValues: PropTypes.shape({
    searchValue: PropTypes.string,
    circle: PropTypes.string,
    searchCriteria: PropTypes.string
  })
};

const defaultProps = {
  initialValues: {}
};

class SearchForm extends Component {
  constructor(props) {
    super(props);
    this.validateForm = validateForm.bind(this);
    this.state = {
      isSubmitting: false,
      values: {
        searchValue: props.initialValues.searchValue || "",
        circle: props.initialValues.circle || "",
        searchCriteria: props.initialValues.searchCriteria || ""
      },
      ...this.initialErrorState
    };
  }

  get hasErrors() {
    return !!(
      this.state.searchValueError ||
      this.state.circleError ||
      this.state.searchCriteriaError
    );
  }

  get initialErrorState() {
    return {
      searchValueError: null,
      circleError: null,
      searchCriteriaError: null
    };
  }

  handleBeforeSubmit = () => {
    this.validate(this.onValidationSuccess);
  };

  validate = (onSuccess = () => {}) => {
    this.clearErrors();
    this.validateForm(validationRules)
      .then(onSuccess)
      .catch(this.onValidationError);
  };

  onValidationSuccess = () => {
    this.setState({ isSubmitting: true });
    this.props
      .onSubmit(this.state.values)
      .catch(this.props.onSubmitError)
      .finally(() => this.setState({ isSubmitting: false }));
  };

  onValidationError = errors => {
    this.setState({ ...errors });
  };

  clearErrors = () => {
    this.setState({ ...this.initialErrorState });
  };

  updateFormValue = fieldName => event => {
    this.setState(
      {
        values: { ...this.state.values, [fieldName]: event.target.value }
      },
      () => this.validate()
    );
  };

  render() {
    // ...
  }
}

SearchForm.propTypes = propTypes;
SearchForm.defaultProps = defaultProps;

export default withStyles(styles)(SearchForm);

如您所见，如果提交流变得更大（例如触摸输入、传递错误等），那么组件内部的复杂性也会显著增加。这就是为什么选择使用维护良好的库更可取的原因。这是我目前的个人喜好

---

请随时查看更新的。希望能有所帮助。

表单验证可能非常复杂，因此我很确定您最终会使用一个库。现在，为了回答您的问题，我们需要考虑表单提交流程。下面是一个简单的例子：

“预提交”

• 将

  isSubmitting

  设置为

  true

• 进入“验证”

“验证”

• 使用

  validationRules

• 有什么错误吗？
• 是：中止提交。设置错误，将

  isSubmitting

  设置为

  false

• 否：转至“提交”

“提交”

• 继续运行提交处理程序（即

  onSubmit

  或

  handleSubmit

  ）
• 将

  isSubmitting

  设置为

  false

一些最低限度的实现可能是：

// ...imports
import validateForm from "../helpers/validateForm";
import styles from "./styles";
import validationRules from "./validationRules";

const propTypes = {
  onSubmit: PropTypes.func.isRequired,
  onSubmitError: PropTypes.func.isRequired,
  initialValues: PropTypes.shape({
    searchValue: PropTypes.string,
    circle: PropTypes.string,
    searchCriteria: PropTypes.string
  })
};

const defaultProps = {
  initialValues: {}
};

class SearchForm extends Component {
  constructor(props) {
    super(props);
    this.validateForm = validateForm.bind(this);
    this.state = {
      isSubmitting: false,
      values: {
        searchValue: props.initialValues.searchValue || "",
        circle: props.initialValues.circle || "",
        searchCriteria: props.initialValues.searchCriteria || ""
      },
      ...this.initialErrorState
    };
  }

  get hasErrors() {
    return !!(
      this.state.searchValueError ||
      this.state.circleError ||
      this.state.searchCriteriaError
    );
  }

  get initialErrorState() {
    return {
      searchValueError: null,
      circleError: null,
      searchCriteriaError: null
    };
  }

  handleBeforeSubmit = () => {
    this.validate(this.onValidationSuccess);
  };

  validate = (onSuccess = () => {}) => {
    this.clearErrors();
    this.validateForm(validationRules)
      .then(onSuccess)
      .catch(this.onValidationError);
  };

  onValidationSuccess = () => {
    this.setState({ isSubmitting: true });
    this.props
      .onSubmit(this.state.values)
      .catch(this.props.onSubmitError)
      .finally(() => this.setState({ isSubmitting: false }));
  };

  onValidationError = errors => {
    this.setState({ ...errors });
  };

  clearErrors = () => {
    this.setState({ ...this.initialErrorState });
  };

  updateFormValue = fieldName => event => {
    this.setState(
      {
        values: { ...this.state.values, [fieldName]: event.target.value }
      },
      () => this.validate()
    );
  };

  render() {
    // ...
  }
}

SearchForm.propTypes = propTypes;
SearchForm.defaultProps = defaultProps;

export default withStyles(styles)(SearchForm);

如您所见，如果提交流变得更大（例如触摸输入、传递错误等），那么组件内部的复杂性也会显著增加。这就是为什么选择使用维护良好的库更可取的原因。这是我目前的个人喜好

---

请随时查看更新的。希望有帮助。

为什么不使用插件？最终，如果你有更多的表单或者表单变得更复杂，那么使用一个插件会更容易。为什么你不想使用任何插件呢？最终，如果你有更多的表单或者表单变得更复杂，使用一个比不使用更容易。@Joy我已经更新了condendbox。请核实changes@Joy我已经更新了沙盒。请验证更改