資訊專欄INFORMATION COLUMN
摘要：對表單元素做了專門的優化處理，他對表單元素做了一些抽象，使得他們的使用方式更統一更規范。約束性和非約束性組件表單里面出來了一個新的概念叫約束性組件。這樣寫出的來的組件，其值就是用戶輸入的內容，完全不管理輸入的過程。約束性組件顯示的是的值。
表單是前端非常重要的一塊內容，并且往往包含了錯誤校驗等邏輯。
React對表單元素做了專門的優化處理，他對表單元素做了一些抽象，使得他們的使用方式更統一更規范。
表單里面出來了一個新的概念叫“約束性組件”。那么如何理解約束性組件和非約束性組件呢。
約束性組件，簡單的說，就是由React管理了它的value，而非約束性組件的value就是原生的DOM管理的。
他們的寫法上也有很大區別。
這個 defaultValue 其實就是原生DOM中的 value 屬性。這樣寫出的來的組件，其value值就是用戶輸入的內容，React完全不管理輸入的過程。
而約束性組件是這么寫的：//...省略部分代碼
handleChange: function(e) {
this.setState({name: e.target.value});
}
這里，value屬性不再是一個寫死的值，他是 this.state.name，而 this.state.name 是由 this.handleChange 負責管理的。
這個時候實際上 input 的 value 根本不是用戶輸入的內容。而是onChange 事件觸發之后，由于 this.setState 導致了一次重新渲染。不過React會優化這個渲染過程，實際它依然是通過設置input的value來實現的。
但是一定要注意，約束性組件顯示的值和用戶輸入的值雖然很多時候是相同的，但他們根本是兩碼事。約束性組件顯示的是 this.state.name 的值。你可以在handleChange中對用戶輸入的值做任意的處理，比如你可以做錯誤校驗。
對比約束性組件和非約束性組件的輸入流程：非約束性組件： 用戶輸入A -> input 中顯示A
約束性組件： 用戶輸入A -> 觸發onChange事件 -> handleChange 中設置 state.name = “A” -> 渲染input使他的value變成A
正式因為這樣，強烈推薦使用約束性組件，因為它能更好的控制組件的生命流程。
React 把 input,textarea 和 select 三個組件做了抽象和封裝，他們的用法變得非常統一，你基本上可以當做同一個組件來用。
他們現在有統一的 value 屬性 和 onChange 事件，現在對于這三種組件你都可以這樣寫
不過 chekbox有和上面三個不一樣，因為checkbox改變的不是 value ，而是 checked 狀態。
你可以這樣寫：
一個示例
下面是一個包含了 input,textarea, select, radio 的表單，并且做了簡單的校驗：
var MyForm = React.createClass({
getInitialState: function() {
return {
email: "",
intro: "",
city: "hz",
male: true, //性別
emailError: "",
introError: ""
};
},
handleEmail: function(e) {
var value = e.target.value;
var error = "";
if(!(/^[a-zA-Z0-9.!#$%&"*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
error = "請輸入正確的Email";
}
this.setState({
email: value,
emailError: error
});
},
handleIntro: function(e) {
var value = e.target.value;
var error = "";
if(value.length < 10) {
error = "介紹不能少于十個字";
}
this.setState({
intro: value,
introError: error
});
},
handleCity: function(e) {
var value = e.target.value;
this.setState({
city: value,
});
},
handleGender: function(e) {
var male = !!(e.target.value == "MALE");
this.setState({
male: male
});
},
render: function() {
return (
{this.state.emailError}
{this.state.introError}
)
}
});
React.render(
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82155.html
摘要：受控輸入框只會顯示通過傳入的數據。例如，數組中的元素將會渲染三個單選框或復選框。屬性接收一個布爾值，用來表示組件是否應該被渲染成選中狀態。 原文地址：React.js Forms: Controlled Components 原文作者：Loren Stewart 譯者：小 B0Y 校對者：珂珂君 本文涵蓋以下受控組件： 文本輸入框 數字輸入框 單選框 復選框 文本域 下拉...
摘要：假如我們從后臺拉取一個數據要填入輸入框，那么必須得使用受控組件，因為非受控組件只能被用戶輸入。不影響正常輸入填充該輸入框的默認值，此時不顯示內容。 網頁中使用的form表單大家肯定都再熟悉不過了，它主要作用是用來收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現形式沒有什么不同，所以如何使用表單我覺得再拿出來說可能是畫蛇添足、毫無意義。不過再怎么樣也不能辜負大家...
摘要：本文發布于我的博客最近對團隊內部組件庫中的組件進行了重構，記錄一下思考的過程。暴露對外提供整個表單狀態的方法通過在外監聽每次觸發的事件來獲取整個的狀態。子表單數量或類型發生變化時當下面子組件被添加或刪除時，需要及時更新的結構。 本文發布于 我的博客 最近對團隊內部 React 組件庫（ne-rc）中的 Form 組件進行了重構，記錄一下思考的過程。 一些前置定義： 名詞 定義 ...
摘要：首次發表在個人博客受控組件或都要綁定一個事件每當表單的狀態發生變化都會被寫入組件的中這種組件在中被稱為受控組件在受控組件中組件渲染出的狀態與它的或者向對應通過這種方式消除了組件的局部狀態是的應用的整個狀態可控官方同樣推薦使用受控表單組件總結 首次發表在個人博客 受控組件 { this.setState({ value: e.target.val...
摘要：我們可以使用函數構造函數將我們的組件轉換為狀態什么是函數構造函數在中，函數是一個在創建對象時運行的函數。我們將使用構造函數方法在對象創建時正確運行對象時設置實例變量。每當一個有一個屬性被設置時，它會在該字段改變的每個時間調用函數。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3823原文：https://www.fullsta...
閱讀 2611·2021-11-02 14:39
閱讀 4328·2021-10-11 10:58
閱讀 1456·2021-09-06 15:12
閱讀 1842·2021-09-01 10:49
閱讀 1330·2019-08-29 18:31
閱讀 1885·2019-08-29 16:10
閱讀 3341·2019-08-28 18:21
閱讀 875·2019-08-26 10:42
