React.js和HTML5電子郵件驗證

我有一個電子郵件輸入我的反應成分：React.js和HTML5電子郵件驗證

   <input 
        type="email" 
        autoComplete="email" 
        placeholder="Email" 
        required 
        value={this.state.formData.email} 
        onChange={this.handleFieldChange('email')} 
       />

會拋出我在控制檯的警告：

The specified value "myemail" is not a valid email address.

每個按鍵，直到輸入有效的電子郵件。我相信這是默認的HTML5電子郵件驗證消息，並且由於每次擊鍵都會改變它的狀態，因此將其重新渲染並重新驗證它。將類型更改爲「文本」可以修復它，但我希望將它保留爲「電子郵件」。爲了避免這些html5警告，什麼是處理這種反應的正確方法？

來源

2016-08-16 Stewie Griffin

在一個旁註中，使用這個lib做React表單變得容易得多：https://github.com/prometheusresearch/react-forms –

對於受控輸入，最終React必須調用Element.prototype.setAttribute()，並且至少在Chrome 52中（我還沒有用其他瀏覽器測試），這會導致警告被記錄到控制檯。此警告不會顯示未受控制的輸入，也不會顯示爲非React，vanilla HTML5表單。

在React源中檢出DOMPropertyOperations.setValueForProperty()，特別是第162行（在v15.3.0中）<input> s。

來源

2016-08-17 17:56:52 jakewisse

您的輸入標籤在<form>？添加novalidate屬性的表單元素來禁用HTML5驗證。你確定它是HTML5驗證嗎？我不記得在控制檯中輸入錯誤的HTML5驗證。

聽起來像你真的想譴責用戶輸入，以防止錯誤消息很快來。有幾個圖書館會爲你做這件事。

來源

2016-08-16 23:42:07

你是對的，它不是html5驗證（消息看起來像html5）..它的控制檯警告來自反應。添加noValidate不起作用 –

React.js和HTML5電子郵件驗證

回答

相關問題