![](/img/trans.png)
[英]Cannot type into input field in form ( React.js - Bootstrap) ( Not able to enter in any value in the input fields )
[英]React Js - Unable to enter value in Input Field
我提前感謝您的所有想法。 我的問題是 email 的輸入字段沒有更新。 誰能給我一個解決方案?
<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
事件永遠不會被正則表達式驗證,因為它會在每個鍵入的鍵上調用。 所以你開始輸入andy@gmail.com
,但a
沒有a
正則表達式......所以 state 沒有更新......所以就像你沒有輸入a
。
您的組件 state 的初始值是多少? 一方面,如果您沒有將 state 上的 email 屬性初始化為空字符串,並且它是未定義的,那么您將使用未定義的檢查阻止 state 的更新。 但你有一個比這更大的問題。 您正在測試輸入的值是否與您的 email 正則表達式模式匹配。 如果您使用該檢查來阻止設置 state,那將永遠不會起作用。 每次輸入值更改時都會觸發onChange
,這意味着它會一次更改一個字符。 所以發生的事情是用戶鍵入一個字符, onChange
觸發,但它與您的模式不匹配,並且您沒有更新 state。
您想要做的是始終更新 state 然后將其作為驗證處理以阻止提交表單。 或者您可以顯示某種錯誤,但您需要始終使用e.target.value
上的新值調用setState
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.