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