React Js - 无法在输入字段中输入值答案

【问题标题】：React Js - Unable to enter value in Input FieldReact Js - 无法在输入字段中输入值
【发布时间】：2020-11-28 08:38:59
【问题描述】：

我提前感谢您提出的所有想法。我的问题是电子邮件的输入字段没有更新。谁能给我一个解决方案？

<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 })
        }
    }
}

【问题讨论】：

您真的看到控制台日志还是没有？
您是否删除了条件块并检查了是否只有setState 有效？
谢谢，Hirasawa Yui 和开发忍者@Matthew Brooks 的建议奏效了

标签： javascript reactjs event-handling icallbackeventhandler

【解决方案1】：

onChange 事件永远不会被正则表达式验证，因为它会在每个键入的键上调用。所以你开始输入andy@gmail.com，使用a，但a没有通过正则表达式......所以状态没有更新......所以就像你没有输入a一样。

【讨论】：

【解决方案2】：

组件状态的初始值是多少？一方面，如果您没有将 state 上的 email 属性初始化为空字符串，并且它是未定义的，那么您将阻止该状态使用未定义的检查进行更新。但你有一个比这更大的问题。您正在测试输入的值是否与您的电子邮件正则表达式模式匹配。如果您使用该检查来阻止设置状态，那将永远不会起作用。 onChange 将在每次输入值更改时触发，这意味着它会一次更改一个字符。所以发生的情况是用户输入了一个字符，onChange 触发，但它与您的模式不匹配，并且您没有更新状态。

您想要做的是始终更新状态，然后将其作为验证来阻止提交表单。或者您可能会显示某种错误，但您需要始终使用 e.target.value 上的新值调用 setState。

【讨论】：