React Js - 无法在输入字段中输入值
React Js - Unable to enter value in Input Field
我提前感谢你的所有想法。我的问题是电子邮件的输入字段没有更新。谁能给我一个解决方案?
<input
type="text"
placeholder="Enter Email "
onChange={this.emailHandle}
value={this.state.email}
/>
上面输入字段的事件处理程序在这里:
emailHandle = (e) => {
if (e.target.value !== "undefined") {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
if (pattern.test(e.target.value)) {
console.log(e.target.value);
this.setState({ email: e.target.value })
}
}
}
你的组件状态的初始值是多少?首先,如果您没有将状态上的电子邮件 属性 初始化为空字符串,并且它是未定义的,那么您将阻止该状态使用未定义的检查进行更新。但你有一个比这更大的问题。您正在测试输入的值是否与您的电子邮件正则表达式模式匹配。如果您使用该检查来阻止设置状态,那将永远行不通。 onChange
将在每次输入值更改时触发,这意味着它将一次更改一个字符。所以发生的事情是用户键入一个字符,onChange
触发,但它与您的模式不匹配,并且您不更新状态。
您要做的是始终更新状态,然后将其作为验证来处理以阻止提交 表单。或者您可以显示某种错误,但您需要始终使用 e.target.value
.
上的新值调用 setState
onChange
事件永远不会被正则表达式验证,因为它会在每个键入的键上调用。所以你开始输入 andy@gmail.com
,a
但是 a
没有通过正则表达式......所以状态没有更新......所以就像你没有输入 a
.
我提前感谢你的所有想法。我的问题是电子邮件的输入字段没有更新。谁能给我一个解决方案?
<input
type="text"
placeholder="Enter Email "
onChange={this.emailHandle}
value={this.state.email}
/>
上面输入字段的事件处理程序在这里:
emailHandle = (e) => {
if (e.target.value !== "undefined") {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
if (pattern.test(e.target.value)) {
console.log(e.target.value);
this.setState({ email: e.target.value })
}
}
}
你的组件状态的初始值是多少?首先,如果您没有将状态上的电子邮件 属性 初始化为空字符串,并且它是未定义的,那么您将阻止该状态使用未定义的检查进行更新。但你有一个比这更大的问题。您正在测试输入的值是否与您的电子邮件正则表达式模式匹配。如果您使用该检查来阻止设置状态,那将永远行不通。 onChange
将在每次输入值更改时触发,这意味着它将一次更改一个字符。所以发生的事情是用户键入一个字符,onChange
触发,但它与您的模式不匹配,并且您不更新状态。
您要做的是始终更新状态,然后将其作为验证来处理以阻止提交 表单。或者您可以显示某种错误,但您需要始终使用 e.target.value
.
setState
onChange
事件永远不会被正则表达式验证,因为它会在每个键入的键上调用。所以你开始输入 andy@gmail.com
,a
但是 a
没有通过正则表达式......所以状态没有更新......所以就像你没有输入 a
.