Javascript React函数中未正确读取输入（无JSX）

我的最终目标是做一些非常简单的电子邮件验证，并根据电子邮件的有效性禁用或启用我的“下一步”按钮。我正在测试.isWorking（）函数（控制传递给按钮禁用属性的布尔值），当我使用email.length>0进行测试时，该函数似乎可以工作！但是，当我稍微将其更改为email.length>4时，该功能不起作用，只会自动返回“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")
        ),));}}

const validEmailRegex=RegExp（/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@+）*）（“+”）@（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.+]；
类注册扩展了React.Component{
构造函数（）{
超级（）；
this.state={email:：}；
this.handleSubmit=this.handleSubmit.bind（this）；
}
isWorking（事件）{
//在这里测试函数
const email=event.target；
如果（email.length>4）{
返回false；
}
返回true；
//如果（ValidMailRegex.test（电子邮件）==true）{
//返回false；
//}
//返回true；
}
handleSubmit（事件）{
event.preventDefault（）；
如果（！event.target.checkValidity（））{
this.setState（{invalid:true，displayErrors:true，
});
返回；
}
const form=event.target；
const data=新表单数据（表单）；
for（让data.keys（）的名称为）{
常量输入=form.elements[名称]；
const parserName=input.dataset.parse；
log（'parser name's'，parserName'）；
if（parserName）{
const parsedValue=inputParsers[parserName]（data.get（name））；
data.set（名称、解析值）；
}
}
这是我的国家({
res:stringifyFormData（数据），无效：false，displayErrors:false，
});
}
render（）{
const{res，无效，displayErrors}=this.state；
//将布尔值传递给按钮以禁用或不禁用
const isEnabled=this.isWorking（事件）；
返回(
React.createElement（“div”，{className:“container”}，
React.createElement（“div”，{className:“row”}，
React.createElement（“form”{onSubmit:this.handleSubmit，noValidate:true，className:displayErrors？'displayErrors'：''}，
React.createElement（“输入”，{className:“表单控件”，name:“formEmail”，id:“formEmail”，type:“email”，占位符：“email”}），
React.createElement（“span”，{className:“span”}，
React.createElement（“button”{className:“button1”，disabled:isEnabled，键入：“button”}，“next”）
),));}}

您没有得到

目标的
值
。请参见工作示例：Hy，您正在调用
此方法。从render中使用发送任何东西作为参数来工作
方法，您已经发送了一个事件，但它们与事件完全不同，我建议您应该从任何元素调用
此方法。工作
方法，如y如果要将此验证添加到电子邮件中，应将该元素上的方法作为
onChange
回调调用。例如，不要使用
React.createElement（“输入”、{className:“表单控件”、name:“formEmail”、id:“formEmail”、type:“email”、占位符：“email”}），
尝试以下操作：
React.createElement（“输入”，{className:“表单控件”，name:“formEmail”，id:“formEmail”，键入：“email”，占位符：“email”，onChange:（e）=>this.isWorking（e）}），）
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")
        ),)));}}

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"
              )
            )
          ]
        )
      )
    );
  }