在 React 函数中无法正确读取输入（无 JSX）

Question

我的最终目标是进行一些非常简单的电子邮件验证，并根据电子邮件的有效性让我的 "next" 按钮禁用或启用。我正在测试我的 .isWorking() 函数（控制传递给按钮的禁用属性的布尔值），当我使用 email.length > 0 进行测试时，该函数似乎可以正常工作！但是当我将其稍微更改为 email.length > 4 时，该功能不起作用，只是自动 returns "true"，禁用按钮。任何帮助都将不胜感激——我完全坚持这一点，我将不胜感激！

const validEmailRegex = RegExp(/^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);

class Signup extends React.Component {

constructor() {
    super();
    this.state = {email: ""};
    this.handleSubmit = this.handleSubmit.bind(this);
}

isWorking (event) {
    //testing function here 
    const email = event.target;
    if (email.length > 4 ) {
        return false;
    }
    return true;

    //if (validEmailRegex.test(email) === true) {
    //   return false;
    //}
    //return true;
    }

handleSubmit(event) {
    event.preventDefault();

    if (!event.target.checkValidity()) {
       this.setState({ invalid: true, displayErrors: true, 
    });
       return;
    }

    const form = event.target;
    const data = new FormData(form);

    for (let name of data.keys()) {
       const input = form.elements[name];
       const parserName = input.dataset.parse;
       console.log('parser name is', parserName);
       if (parserName) {
          const parsedValue = inputParsers[parserName](data.get(name));
       data.set(name, parsedValue);
       }
     }

     this.setState({
        res: stringifyFormData(data), invalid: false, displayErrors: false, 
     });
 }

render() {
    const { res, invalid, displayErrors } = this.state;

    //pass boolean to the button for disabling or not 
    const isEnabled = this.isWorking(event);

    return (
        React.createElement("div", { className: "container" },
        React.createElement("div", { className: "row" },

            React.createElement("form", { onSubmit: this.handleSubmit, noValidate: true, className: displayErrors ? 'displayErrors' : '' },
            React.createElement("input", { className: "form-control", name: "formEmail", id: "formEmail", type: "email", placeholder: "email"}),),

            React.createElement("span", { className: "span"},
                 React.createElement("button", { className: "button1", disabled: isEnabled, type: "button"}, "next")
        ),));}}

Answer 1

class Signup extends React.Component {

constructor() {
    super();
    this.state = {email: "", isEnabled: true};
    this.handleSubmit = this.handleSubmit.bind(this);
}

isWorking (event) {
    //testing function here 
    const email = event.target.value;
    console.log(email.length)
    if (email.length > 4 ) {
        this.setState({ isEnabled: false});
    } else {
      this.setState({ isEnabled: true});
    }
    }

handleSubmit(event) {
    event.preventDefault();

    if (!event.target.checkValidity()) {
       this.setState({ invalid: true, displayErrors: true, 
    });
       return;
    }

    const form = event.target;
    const data = new FormData(form);

    for (let name of data.keys()) {
       const input = form.elements[name];
       const parserName = input.dataset.parse;
       console.log('parser name is', parserName);
       if (parserName) {
          const parsedValue = inputParsers[parserName](data.get(name));
       data.set(name, parsedValue);
       }
     }

     this.setState({
        res: stringifyFormData(data), invalid: false, displayErrors: false, 
     });
 }

render() {
    const { res, invalid, displayErrors } = this.state;

    //pass boolean to the button for disabling or not 
   // const isEnabled = this.isWorking(event);

    return (
        React.createElement("div", { className: "container" },
        React.createElement("div", { className: "row" },

            React.createElement("form", { onSubmit: this.handleSubmit, onChange:(e)=>this.isWorking(e), noValidate: true, className: displayErrors ? 'displayErrors' : '' },
            React.createElement("input", { className: "form-control", name: "formEmail", id: "formEmail", type: "email", placeholder: "email"}),),

            React.createElement("span", { className: "span"},
                 React.createElement("button", { className: "button1", disabled: this.state.isEnabled, type: "button"}, "next")
        ),)));}}

Answer 2

class Signup extends React.Component {
  constructor() {
    super();
    this.state = { email: "", isEnabled: true };
    this.isWorking = this.isWorking.bind(this);
  }

  isWorking(event) {
    //testing function here
    console.log("event", event.target.value);
    const email = event.target.value;
    if (email.length > 4) {
      this.setState({ isEnabled: false });
    } else {
      this.setState({ isEnabled: true });
    }
    return true;
  }

  render() {
    const { displayErrors } = this.state;

    return React.createElement(
      "div",
      { className: "container" },
      React.createElement(
        "div",
        { className: "row" },
        React.createElement(
          "form",
          {
            onSubmit: this.handleSubmit,
            noValidate: true,
            className: displayErrors ? "displayErrors" : ""
          },
          [
            React.createElement("input", {
              className: "form-control",
              name: "formEmail",
              id: "formEmail",
              type: "email",
              placeholder: "email",
              onChange: this.isWorking
            }),
            React.createElement(
              "span",
              { className: "span" },
              React.createElement(
                "button",
                {
                  className: "button1",
                  disabled: this.state.isEnabled,
                  type: "button"
                },
                "next"
              )
            )
          ]
        )
      )
    );
  }

在 React 函数中无法正确读取输入（无 JSX）

Input not being read properly in React function (no JSX)

javascript

reactjs

email-validation