[登录按钮在用户登录时被禁用

嗨，我正在进行登录功能，由于某种原因，填写所有输入字段，我的按钮保持禁用状态，我无法提交。

这是renderButton函数...

renderButton(label) {
  return (
    <button
      disabled={this.validate() ? true : false}
      className="btn btn-primary"
    >
      {label}
    </button>
  );
}

这是登录表格...

import React, { Component } from "react";
import Joi from "joi-browser";
import Form from "./form";
import { login } from "../services/authService";

class LoginForm extends Form {
  state = {
    data: { username: "", password: "" },
    errors: {}
  };

  schema = {
    email: Joi.string()
      .required()
      .label("Email"),
    password: Joi.string()
      .required()
      .label("Password")
  };

  doSubmit = async () => {
    //call server
    const { data } = this.state;
    await login(data.email, data.password);
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {this.renderInput("email", "Email")}
          {this.renderInput("password", "Password", "password")}
          {this.renderButton("Login")}
        </form>
      </div>
    );
  }
}

export default LoginForm;

这是其中包含validate和vaidate属性的验证函数...

validate = () => {
   const options = { abortEarly: false };
   const { error } = Joi.validate(this.state.data, this.schema, options);
   if (!error) return null;

   const errors = {};
   for (let item of error.details) errors[item.path[0]] = item.message;
   return errors;
 };

 validateProperty = ({ name, value }) => {
   const obj = { [name]: value };
   const schema = { [name]: this.schema[name] };
   const { error } = Joi.validate(obj, schema);
   return error ? error.details[0].message : null;
 };

看起来每次输入更改时都不调用render函数，这可能是因为您正在扩展某些Form而不是React。进行深度嵌套是一种反模式，只需扩展React，如果您想添加一些功能，则可以使用HOC（高阶组件函数）包装组件。

[登录按钮在用户登录时被禁用

嗨，我正在进行登录功能，由于某种原因，填写所有输入字段，我的按钮保持禁用状态，我无法提交。

这是renderButton函数...

renderButton(label) {
  return (
    <button
      disabled={this.validate() ? true : false}
      className="btn btn-primary"
    >
      {label}
    </button>
  );
}

这是登录表格...

import React, { Component } from "react";
import Joi from "joi-browser";
import Form from "./form";
import { login } from "../services/authService";

class LoginForm extends Form {
  state = {
    data: { username: "", password: "" },
    errors: {}
  };

  schema = {
    email: Joi.string()
      .required()
      .label("Email"),
    password: Joi.string()
      .required()
      .label("Password")
  };

  doSubmit = async () => {
    //call server
    const { data } = this.state;
    await login(data.email, data.password);
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {this.renderInput("email", "Email")}
          {this.renderInput("password", "Password", "password")}
          {this.renderButton("Login")}
        </form>
      </div>
    );
  }
}

export default LoginForm;

这是其中包含validate和vaidate属性的验证函数...

validate = () => {
   const options = { abortEarly: false };
   const { error } = Joi.validate(this.state.data, this.schema, options);
   if (!error) return null;

   const errors = {};
   for (let item of error.details) errors[item.path[0]] = item.message;
   return errors;
 };

 validateProperty = ({ name, value }) => {
   const obj = { [name]: value };
   const schema = { [name]: this.schema[name] };
   const { error } = Joi.validate(obj, schema);
   return error ? error.details[0].message : null;
 };

看起来每次输入更改时都不调用render函数，这可能是因为您正在扩展某些Form而不是React。进行深度嵌套是一种反模式，只需扩展React，如果您想添加一些功能，则可以使用HOC（高阶组件函数）包装组件。