Question

我需要通过正则表达式验证表单中的字段，并且我正在考虑何时最好这样做：

在渲染方法中： 这似乎是最反应的方式，因为我只保留状态中所需的数据并计算派生数据。但是对于每次渲染运行正则表达式的性能不是很糟糕吗？

render() {
  return (
    <div>
      <input
        onChange={e => this.setState({ value: e.targe.value })}
        value={this.state.value}
      />
      Valid: {this.validate(this.state.value)}
    </div>
  );
}

在onChange处理程序中： 我还可以在onChange处理程序中验证新值，并将验证结果保持在状态中。这样只需要在需要时调用正则表达式，但状态中会有冗余数据。

render() {
  return (
    <div>
      <input
        onChange={e => this.setState({value:e.targe.value,valid:this.validate(e.target.value)}}
        value={this.state.value}
      />
      Valid: {this.state.valid}   
    </div>
  );
}

Answer 1

你最好在改变中做到这一点，即你的第二种做法。原因 -

在用户与表单字段进行交互之前，不要立即显示错误，这是一种更好的体验。
对于受控文本字段，渲染将被多次调用。任何连续验证都会在任何一种方法下最终导致明显的性能下降。您可以使用debounced验证和第二种方法来控制它。
将业务逻辑与// head <body> <?php include('nav.php'); ?> // home.php </body>分开。

Answer 2

为了进行验证，您应该已经在该状态中具有“错误”对象。如果发生验证错误，您将填充state.errors并在您想要的任何地方使用它。如果要在更改时验证表单字段，则必须定义处理程序并在onChange处理程序上使用输出。

假设您有一个包含用户名和密码字段的表单。

state = { account: { username: "", password: "" }, errors: {} };



validateProperty = ({ name, value }) => {
   //object destructuiring. name=input.name, value=input.value
   if (name === "username") {
     if (value.trim() === "") return "username is required";
   }
   if ((name = "password")) {
     if (value.trim() === "") return "password is required";
   }};

然后，我们需要在onChange处理程序中使用输出。

handleChange = ({ currentTarget: input }) => {
   //e.currentTarget=input obj destructuring
   const errors = { ...this.state.errors }; // always make a copy of state object
   const errorMessage = this.validateProperty(input);//pass the input=e.currentTarget
   if (errorMessage) errors[input.name] = errorMessage;
   else delete errors[input.name];
   const account = { ...this.state.account };
   account[input.name] = input.value; //currentTarget returns input field
   this.setState(() => ({ account, errors }));
 };

如果您想提交整个表单，则需要验证另一个功能，但是这次您必须在onSubmit处理程序中使用它。

validate = () => {
   const errors = {}; //we dont change state, so no need to pass it here
   const { account } = this.state;
   if (account.username.trim() === "") {
     errors.username = "Username is required.";
   }

   if (account.password.trim() === "") {
     errors.password = "pass is required.";
   }
   return Object.keys(errors).length === 0 ? null : errors;
 };

现在在handleSubmit方法中使用输出。

handleSubmit = e => {
   e.preventDefault();
   const errors = this.validate();
   console.log(errors);
   this.setState(() => ({ errors })); //{errors:errors} shorthand
   if (errors) return;
 };

何时验证表格

2 个答案: