資訊專欄INFORMATION COLUMN
摘要：對表單元素做了專門的優(yōu)化處理，他對表單元素做了一些抽象，使得他們的使用方式更統(tǒng)一更規(guī)范。約束性和非約束性組件表單里面出來了一個新的概念叫約束性組件。這樣寫出的來的組件，其值就是用戶輸入的內(nèi)容，完全不管理輸入的過程。約束性組件顯示的是的值。
表單是前端非常重要的一塊內(nèi)容，并且往往包含了錯誤校驗(yàn)等邏輯。
React對表單元素做了專門的優(yōu)化處理，他對表單元素做了一些抽象，使得他們的使用方式更統(tǒng)一更規(guī)范。
表單里面出來了一個新的概念叫“約束性組件”。那么如何理解約束性組件和非約束性組件呢。
約束性組件，簡單的說，就是由React管理了它的value，而非約束性組件的value就是原生的DOM管理的。
他們的寫法上也有很大區(qū)別。
這個 defaultValue 其實(shí)就是原生DOM中的 value 屬性。這樣寫出的來的組件，其value值就是用戶輸入的內(nèi)容，React完全不管理輸入的過程。
而約束性組件是這么寫的：//...省略部分代碼
handleChange: function(e) {
this.setState({name: e.target.value});
}
這里，value屬性不再是一個寫死的值，他是 this.state.name，而 this.state.name 是由 this.handleChange 負(fù)責(zé)管理的。
這個時(shí)候?qū)嶋H上 input 的 value 根本不是用戶輸入的內(nèi)容。而是onChange 事件觸發(fā)之后，由于 this.setState 導(dǎo)致了一次重新渲染。不過React會優(yōu)化這個渲染過程，實(shí)際它依然是通過設(shè)置input的value來實(shí)現(xiàn)的。
但是一定要注意，約束性組件顯示的值和用戶輸入的值雖然很多時(shí)候是相同的，但他們根本是兩碼事。約束性組件顯示的是 this.state.name 的值。你可以在handleChange中對用戶輸入的值做任意的處理，比如你可以做錯誤校驗(yàn)。
對比約束性組件和非約束性組件的輸入流程：非約束性組件： 用戶輸入A -> input 中顯示A
約束性組件： 用戶輸入A -> 觸發(fā)onChange事件 -> handleChange 中設(shè)置 state.name = “A” -> 渲染input使他的value變成A
正式因?yàn)檫@樣，強(qiáng)烈推薦使用約束性組件，因?yàn)樗芨玫目刂平M件的生命流程。
React 把 input,textarea 和 select 三個組件做了抽象和封裝，他們的用法變得非常統(tǒng)一，你基本上可以當(dāng)做同一個組件來用。
他們現(xiàn)在有統(tǒng)一的 value 屬性 和 onChange 事件，現(xiàn)在對于這三種組件你都可以這樣寫
不過 chekbox有和上面三個不一樣，因?yàn)閏heckbox改變的不是 value ，而是 checked 狀態(tài)。
你可以這樣寫：
一個示例
下面是一個包含了 input,textarea, select, radio 的表單，并且做了簡單的校驗(yàn)：
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(
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82155.html
摘要：受控輸入框只會顯示通過傳入的數(shù)據(jù)。例如，數(shù)組中的元素將會渲染三個單選框或復(fù)選框。屬性接收一個布爾值，用來表示組件是否應(yīng)該被渲染成選中狀態(tài)。 原文地址：React.js Forms: Controlled Components 原文作者：Loren Stewart 譯者：小 B0Y 校對者：珂珂君 本文涵蓋以下受控組件： 文本輸入框 數(shù)字輸入框 單選框 復(fù)選框 文本域 下拉...
摘要：假如我們從后臺拉取一個數(shù)據(jù)要填入輸入框，那么必須得使用受控組件，因?yàn)榉鞘芸亟M件只能被用戶輸入。不影響正常輸入填充該輸入框的默認(rèn)值，此時(shí)不顯示內(nèi)容。 網(wǎng)頁中使用的form表單大家肯定都再熟悉不過了，它主要作用是用來收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現(xiàn)形式?jīng)]有什么不同，所以如何使用表單我覺得再拿出來說可能是畫蛇添足、毫無意義。不過再怎么樣也不能辜負(fù)大家...
摘要：本文發(fā)布于我的博客最近對團(tuán)隊(duì)內(nèi)部組件庫中的組件進(jìn)行了重構(gòu)，記錄一下思考的過程。暴露對外提供整個表單狀態(tài)的方法通過在外監(jiān)聽每次觸發(fā)的事件來獲取整個的狀態(tài)。子表單數(shù)量或類型發(fā)生變化時(shí)當(dāng)下面子組件被添加或刪除時(shí)，需要及時(shí)更新的結(jié)構(gòu)。 本文發(fā)布于 我的博客 最近對團(tuán)隊(duì)內(nèi)部 React 組件庫（ne-rc）中的 Form 組件進(jìn)行了重構(gòu)，記錄一下思考的過程。 一些前置定義： 名詞 定義 ...
摘要：首次發(fā)表在個人博客受控組件或都要綁定一個事件每當(dāng)表單的狀態(tài)發(fā)生變化都會被寫入組件的中這種組件在中被稱為受控組件在受控組件中組件渲染出的狀態(tài)與它的或者向?qū)?yīng)通過這種方式消除了組件的局部狀態(tài)是的應(yīng)用的整個狀態(tài)可控官方同樣推薦使用受控表單組件總結(jié) 首次發(fā)表在個人博客 受控組件 { this.setState({ value: e.target.val...
摘要：我們可以使用函數(shù)構(gòu)造函數(shù)將我們的組件轉(zhuǎn)換為狀態(tài)什么是函數(shù)構(gòu)造函數(shù)在中，函數(shù)是一個在創(chuàng)建對象時(shí)運(yùn)行的函數(shù)。我們將使用構(gòu)造函數(shù)方法在對象創(chuàng)建時(shí)正確運(yùn)行對象時(shí)設(shè)置實(shí)例變量。每當(dāng)一個有一個屬性被設(shè)置時(shí)，它會在該字段改變的每個時(shí)間調(diào)用函數(shù)。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3823原文：https://www.fullsta...
閱讀 2678·2021-11-02 14:39
閱讀 4409·2021-10-11 10:58
閱讀 1624·2021-09-06 15:12
閱讀 1944·2021-09-01 10:49
閱讀 1400·2019-08-29 18:31
閱讀 1956·2019-08-29 16:10
閱讀 3413·2019-08-28 18:21
閱讀 946·2019-08-26 10:42
