如何根据 React 上的输入表单禁用/启用按钮？

Question

I have created a Form Input, so people can send me an email. I want my button to only be active if there are no error messages from the different inputs. By now, the button is disabled when the page first renders, but after I fill the first input with validation (email), it becomes enabled. I want it to just be enabled once all inputs are correctly filled. Also, if I fill all the inputs, but then clean one, I want the button to become disabled.

Can you help me?

See the code below:

const validateForm = (errors) => {
  let valid = true;
  Object.values(errors).forEach(
    (val) => val.length > 0 && (valid = false)
  );
  return valid;
}

class Form2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisabled: true,
      firstName: null,
      email: null,
      subject: null,
      message: null,
      errors: {
        firstName: "",
        email: "",
        subject: "",
        message: "",

      }
    };
  }

  handleSubmit = (e) => {
    e.preventDefault();
    emailjs.sendForm('gmail', 'template_test', e.target, "***************")
    if(validateForm(this.state.errors)) {
      console.info("Valid Form")
    }else{
      console.error("Invalid Form")
    }
    e.target.reset();
  }

  handleChange = (event) => {
    event.preventDefault();
    const { name, value } = event.target;
    let errors = this.state.errors;

    switch (name) {
      case "firstName": 
        errors.firstName = 
          value.length < 3
            ? "Enter your name"
            : "";
        break;
      case "email": 
        errors.email = 
          validEmailRegex.test(value)
            ? ""
            : "Enter a valid email address";
        break;
      case "subject": 
        errors.subject = 
          value.length < 3
            ? "Enter a subject at least 3 characters long"
            : "";
        break;
      case "message" :
        errors.message =
        value.length < 10
            ? "Enter your message. It must be at least 10 characters long"
            : "";
      default:
        break;
    }

    this.setState({errors, [name]: value});

    if(errors.email.length < 1 && errors.subject.length < 1 && errors.message.length < 1){
      this.setState({isDisabled: false})
    } else if(errors.email.length > 0 && errors.subject.length > 0 && errors.message.length > 0){
      this.setState({isDisabled: true})
    }
  }

  
  render(){
    const {errors} = this.state;
  return (
    <div>
     <div className="container fluid">
       <form onSubmit={this.handleSubmit}>
        <div className="row pt-5 mx-auto">
          <div className="col-8 form-group mx-auto">
            <input type="text" className="form-control" placeholder="Name" name="name"/>
            {errors.firstName.length > 0 && 
                <span className='error'>{errors.firstName}</span>}
          </div>
          <div className="col-8 form-group pt-2 mx-auto">
            <input type="email" className="form-control" placeholder="Email Address" name="email" onChange={this.handleChange} noValidate/>
            {errors.email.length > 0 && 
                <span className='error'>{errors.email}</span>}
          </div>
          <div className="col-8 form-group pt-2 mx-auto">
            <input type="text" className="form-control" placeholder="Subject" name="subject" onChange={this.handleChange} noValidate/>
            {errors.subject.length > 0 &&
              <span className="error">{errors.subject}</span>}
          </div>
          <div className="col-8 form-group pt-2 mx-auto">
            <textarea className="form-control" id="" cols="30" rows="8" placeholder="Your message" name="message" onChange={this.handleChange} noValidate></textarea>
              {errors.message.length > 0 &&
              <span className="error">{errors.message}</span>}
          </div>
          <div className="col-8 pt-3 mx-auto">
            <button className="btn btn-dark" disabled={this.state.isDisabled}>Submit</button>
          </div>
        </div>
       </form>
     </div>
   </div>
)
}
}

export default Form2;

Answer 1

On your handleChange method, if there was any error, set the state of of isDisabled to true, otherwise set it to false.

Answer 2

You forgot your logic:) Just put || instead of && in this block:

if (errors.email.length > 0 && errors.subject.length > 0 && errors.message.length > 0) {
    this.setState({isDisabled: false})
} else if (errors.email.length === 0 || errors.subject.length === 0 || errors.message.length === 0) {
    this.setState({isDisabled: true})
}

Answer 3

Based on the way you trigger your onChange function, I would actually assign default values to your error messages.

      errors: {
        firstName: " ",
        email: " ",
        subject: " ",
        message: " "
      }

Otherwise your switch statement will enable the form as soon as at least one field is properly filled.

Once you do that, your if block logic becomes a heck of a lot simpler:

    if (
      errors.email.length === 0 &&
      errors.subject.length === 0 &&
      errors.message.length === 0 &&
      errors.firstName.length === 0
    ) {
      this.setState({ isDisabled: false });
    } else {
      this.setState({ isDisabled: true });
    }

Also you don't seem to have an onChange attached to your name field, so I fixed that as well. Anyway, here is a working version: https://codesandbox.io/s/upbeat-ritchie-sz7zl?file=/src/App.js

Also note that instead of putting a space into all of your default error messages, because this does seem like a bit of a hack, you could simply fill them with the actual messages as in

errors: {
        firstName: "Enter your name",
        email: "Enter a valid email",
        subject: "Enter a subject at least 3 characters long",
        message: "Enter your message. It must be at least 10 characters long"
      }

But this would depend on whether you're ok with displaying those on page load.