資訊專欄INFORMATION COLUMN
摘要：首次發(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.value.toUpperCase(),
});
}}
/>
或都要綁定一個(gè)change事件;每當(dāng)表單的狀態(tài)發(fā)生變化,都會(huì)被寫入組件的state中,這種組件在React中被稱為受控組件;在受控組件中,組件渲染出的狀態(tài)與它的value或者checked prop向?qū)?yīng).react通過這種方式消除了組件的局部狀態(tài),是的應(yīng)用的整個(gè)狀態(tài)可控.react官方同樣推薦使用受控表單組件,總結(jié)下React受控組件更新state的流程:
1.可以通過初始state中設(shè)置表單的默認(rèn)值;
2.每當(dāng)表單的值發(fā)生變化時(shí),調(diào)用onChange事件處理器;
3.事件處理器通過合成事件對(duì)象e拿到改變后的狀態(tài),并更新應(yīng)用的state.
4.setState觸發(fā)視圖的重新渲染,完成表單組件值得更新
非受控組件react中數(shù)據(jù)是單向流動(dòng)的.從示例中,我們能看出來表單的數(shù)據(jù)來源于組件的state,并通過props傳入,這也稱為單向數(shù)據(jù)綁定.然后,我們又通過onChange事件處理器將新的表單數(shù)據(jù)寫回到state,完成了雙向數(shù)據(jù)綁定.
如果一個(gè)表單組件沒有value props(單選按鈕和復(fù)選按鈕對(duì)應(yīng)的是 checked props)時(shí),就可以稱為非受控組件;
使用defaultValue和defaultChecked來表示組件的默認(rèn)狀態(tài);
通過 defaultValue和defaultChecked來設(shè)置組件的默認(rèn)值,它僅會(huì)被渲染一次,在后續(xù)的渲染時(shí)并不起作用
import React, { Component } from "react";
class UnControlled extends Component {
handleSubmit = (e) => {
console.log(e);
e.preventDefault();
console.log(this.name.value);
}
render() {
return (
);
}
}
export default UnControlled;
對(duì)比受控組件和非受控組件
將輸入的字母轉(zhuǎn)化為大寫展示
{
this.setState({
value: e.target.value.toUpperCase(),
});
}}
/>
直接展示輸入的字母
{
this.setState({
value: e.target.value.toUpperCase(),
});
}}
/>
1.性能上的問題
在受控組件中,每次表單的值發(fā)生變化,都會(huì)調(diào)用一次onChange事件處理器,這確實(shí)會(huì)帶來性能上的的損耗,雖然使用費(fèi)受控組件不會(huì)出現(xiàn)這些問題,但仍然不提倡使用非受控組件,這個(gè)問題可以通過Flux/Redux應(yīng)用架構(gòu)等方式來達(dá)到統(tǒng)一組件狀態(tài)的目的.
2.是否需要事件綁定使用受控組件需要為每一個(gè)組件綁定一個(gè)change事件,并且定義一個(gè)事件處理器來同步表單值和組件的狀態(tài),這是一個(gè)必要條件.當(dāng)然,某些情況可以使用一個(gè)事件處理器來處理多個(gè)表單域
import React, { Component } from "react";
class Controlled extends Component {
constructor(...args) {
super(...args);
this.state = {
name: "xingxing",
age: 18,
};
}
handleChange = (name, e) => {
const { value } = e.target;
this.setState({
[name]: value,
});
}
render() {
const { name, age } = this.state;
return (
);
}
}
export default Controlled;
表單組件的幾個(gè)重要屬性
1.狀態(tài)屬性
React的form組件提供了幾個(gè)重要的屬性,用來顯示組件的狀態(tài)
value: 類型為text的input組件,textarea組件以及select組件都借助value prop來展示應(yīng)用的狀態(tài)
checked: 類型為radio或checkbox的組件借助值為boolean類型的selected prop來展示應(yīng)用的狀態(tài)
selected: 該屬性可作用于select組件下面的option上,React并不建議這種方式表示狀態(tài).而推薦在select組件上使用value的方式
2.事件屬性當(dāng)狀態(tài)屬性改變時(shí)會(huì)觸發(fā)onChange事件屬性.受控組件中的change事件與HTML DOM中提供的input事件更為類似;
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92081.html
摘要：假如我們從后臺(tái)拉取一個(gè)數(shù)據(jù)要填入輸入框，那么必須得使用受控組件，因?yàn)榉鞘芸亟M件只能被用戶輸入。不影響正常輸入填充該輸入框的默認(rèn)值，此時(shí)不顯示內(nèi)容。 網(wǎng)頁(yè)中使用的form表單大家肯定都再熟悉不過了，它主要作用是用來收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現(xiàn)形式?jīng)]有什么不同，所以如何使用表單我覺得再拿出來說可能是畫蛇添足、毫無意義。不過再怎么樣也不能辜負(fù)大家...
摘要：受控組件與非受控組件在官網(wǎng)與國(guó)內(nèi)網(wǎng)上的資料都不多，有些人覺得它可有可不有，也不在意。受控組件與非受控組件是處理表單的入口。認(rèn)為不能單獨(dú)存在，需要與等控制的屬性或事件一起使用。它們共同構(gòu)成受控組件，受控是受的控制。 受控組件與非受控組件在官網(wǎng)與國(guó)內(nèi)網(wǎng)上的資料都不多，有些人覺得它可有可不有，也不在意。這恰恰顯示React的威力，滿足不同規(guī)模大小的工程需求。譬如你只是做ListView這樣簡(jiǎn)...
摘要：盤點(diǎn)一下，模式反應(yīng)了典型的控制權(quán)問題。異步狀態(tài)管理與控制權(quán)提到控制權(quán)話題，怎能少得了這樣的狀態(tài)管理工具。狀態(tài)管理中的控制主義和極簡(jiǎn)主義了解了異步狀態(tài)中的控制權(quán)問題，我們?cè)購(gòu)娜纸嵌冗M(jìn)行分析。 控制權(quán)——這個(gè)概念在編程中至關(guān)重要。比如，輪子封裝層與業(yè)務(wù)消費(fèi)層對(duì)于控制權(quán)的爭(zhēng)奪，就是一個(gè)很有意思的話題。這在 React 世界里也不例外。表面上看，我們當(dāng)然希望輪子掌控的事情越多越好：因?yàn)槌橄髮?..
摘要：盤點(diǎn)一下，模式反應(yīng)了典型的控制權(quán)問題。異步狀態(tài)管理與控制權(quán)提到控制權(quán)話題，怎能少得了這樣的狀態(tài)管理工具。狀態(tài)管理中的控制主義和極簡(jiǎn)主義了解了異步狀態(tài)中的控制權(quán)問題，我們?cè)購(gòu)娜纸嵌冗M(jìn)行分析。 控制權(quán)——這個(gè)概念在編程中至關(guān)重要。比如，輪子封裝層與業(yè)務(wù)消費(fèi)層對(duì)于控制權(quán)的爭(zhēng)奪，就是一個(gè)很有意思的話題。這在 React 世界里也不例外。表面上看，我們當(dāng)然希望輪子掌控的事情越多越好：因?yàn)槌橄髮?..
閱讀 1667·2021-08-13 15:03
閱讀 2100·2019-08-30 15:54
閱讀 3558·2019-08-26 10:30
閱讀 1033·2019-08-26 10:22
閱讀 2759·2019-08-23 14:42
閱讀 1820·2019-08-22 11:16
閱讀 1049·2019-08-21 18:33
閱讀 3176·2019-08-21 17:28
