javascript - 在 React 函数中没有正确读取输入(没有 JSX)
问题描述
我的最终目标是进行一些非常简单的电子邮件验证,并根据电子邮件的有效性让我的“下一步”按钮禁用或启用。我正在测试我的 .isWorking() 函数(控制传递给按钮的 disabled 属性的布尔值),当我使用 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")
),));}}
解决方案
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"
)
)
]
)
)
);
}
推荐阅读
- django - 社区网站上应该有身份验证吗?
- javascript - react scrollTo 不是一个函数
- nginx - phpmyadmin 未加载 png(图像) nginx
- android - Firebase 嵌套子项的 Recycleview 无法显示
- javascript - 在加载视图或显示页面时使用进度条
- apache-kafka - Spring Cloud Stream Kafka Binder autoCommitOnError=false 得到意外行为
- php - 访问代码中的应用程序 url 时 Laravel 5 配置缓存问题
- c# - 如何在c#中的编译期间循环遍历泛型类型
- jasmine - 我们可以将哪些茉莉花预期条件用于测试用例?
- datatables - 基于列的 DataTables row.add()