資訊專欄INFORMATION COLUMN
摘要：受控組件其值由控制的輸入表單元素稱為受控組件。如果讓表單數(shù)據(jù)由處理時(shí)，替代方案為使用非受控組件。使用非受控組件時(shí)，通常你希望可以為其指定初始值，但不再控制后續(xù)更新。
受控組件
其值由React控制的輸入表單元素稱為“受控組件”。
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ""};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert("A name was submitted: " + this.state.value);
event.preventDefault();
}
render() {
return (
);
}
}
通過(guò)綁定onChange實(shí)現(xiàn)了類似雙向綁定
理解：首先input的顯示的值受value={this.state.value}
控制，輸入時(shí)通過(guò)onChange函數(shù)回調(diào)，將新接受的值設(shè)置回this.state.value,從而再作用到組件的顯示，形成了雙向綁定的感覺(jué)
在大多數(shù)情況下，我們推薦使用 受控組件 來(lái)實(shí)現(xiàn)表單。 在受控組件中，表單數(shù)據(jù)由 React 組件處理。如果讓表單數(shù)據(jù)由 DOM 處理時(shí)，替代方案為使用非受控組件。默認(rèn)值 defaultValue
在 React 的生命周期中，表單元素上的 value 屬性將會(huì)覆蓋 DOM 中的值。
使用非受控組件時(shí)，通常你希望 React 可以為其指定初始值，但不再控制后續(xù)更新。要解決這個(gè)問(wèn)題，你可以指定一個(gè) defaultValue 屬性而不是 value。
render() {
return (
);
}
文件輸入標(biāo)簽
在React中， 始終是一個(gè)不受控制的組件，因?yàn)樗闹抵荒苡捎脩粼O(shè)置，而不是以編程方式設(shè)置。
class FileInput extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
alert(
`Selected file - ${this.fileInput.files[0].name}`
);
}
render() {
return (
);
}
}
ReactDOM.render(
受控和非受控你該怎么選
原文
Conclusion
Both the controlled and uncontrolled form fields have their merit. Evaluate your specific situation and pick the approach — what works for you is good enough.
If your form is incredibly simple in terms of UI feedback, uncontrolled with refs is entirely fine. You don’t have to listen to what the various articles are saying is “bad.”
Also, this is not an once-and-for-all decision: you can always migrate to controlled inputs. Going from uncontrolled to controlled inputs is not hard.
兩種方法都有各自的優(yōu)點(diǎn)，根據(jù)具體使用場(chǎng)景評(píng)估一下，從中選擇一種更適合的方式，如果表單在UI反饋方面非常簡(jiǎn)單，那么使用ref的不受控組件就完全沒(méi)有問(wèn)題。你不必聽(tīng)各種各樣的文章說(shuō)什么是“壞的”，同樣也不是說(shuō)不能更改，畢竟總是可以轉(zhuǎn)換到可控制的，使用受控的話也不是很費(fèi)勁。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/110223.html
摘要：首次發(fā)表在個(gè)人博客受控組件或都要綁定一個(gè)事件每當(dāng)表單的狀態(tài)發(fā)生變化都會(huì)被寫入組件的中這種組件在中被稱為受控組件在受控組件中組件渲染出的狀態(tài)與它的或者向?qū)?yīng)通過(guò)這種方式消除了組件的局部狀態(tài)是的應(yīng)用的整個(gè)狀態(tài)可控官方同樣推薦使用受控表單組件總結(jié) 首次發(fā)表在個(gè)人博客 受控組件 { this.setState({ value: e.target.val...
摘要：那什么時(shí)候使用受控組件，什么時(shí)候使用非受控組件呢我們知道受控組件是比較符合我們傳統(tǒng)組件開(kāi)發(fā)的思路的。故最基本的組件編寫套路就這些。 上一篇講了 React 兩種最常見(jiàn)的組件：受控組件和非受控組件。為了可用性，我們一般編寫出來(lái)的組件希望支持這兩種特性：可以通過(guò)組件自身的方法來(lái)改變組件的某(些)狀態(tài)，也可以通過(guò) props 的值的變化來(lái)改變組件自身的同一個(gè)(些)狀態(tài)。 組件改變自己的狀態(tài)只...
摘要：假如我們從后臺(tái)拉取一個(gè)數(shù)據(jù)要填入輸入框，那么必須得使用受控組件，因?yàn)榉鞘芸亟M件只能被用戶輸入。不影響正常輸入填充該輸入框的默認(rèn)值，此時(shí)不顯示內(nèi)容。 網(wǎng)頁(yè)中使用的form表單大家肯定都再熟悉不過(guò)了，它主要作用是用來(lái)收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現(xiàn)形式?jīng)]有什么不同，所以如何使用表單我覺(jué)得再拿出來(lái)說(shuō)可能是畫蛇添足、毫無(wú)意義。不過(guò)再怎么樣也不能辜負(fù)大家...
摘要：小明小明兒子，可以看到組件顯示了父組件的。小明受控組件和非受控組件受控組件和非受控組件這些都是指的表單組件，當(dāng)一個(gè)表單的值是通過(guò)改變的而不是通過(guò)是受控組件，否則就是非受控組件。 react眾所周知的前端3大主流框架之一，由于出色的性能，完善的周邊設(shè)施風(fēng)頭一時(shí)無(wú)兩。本文就帶大家一起掌握react。 jsx語(yǔ)法 前端MVVM主流框架都有一套自己的模板處理方法，react則使用它獨(dú)特的jsx...
閱讀 3077·2019-08-30 15:56
閱讀 1234·2019-08-29 15:20
閱讀 1571·2019-08-29 13:19
閱讀 1473·2019-08-29 13:10
閱讀 3381·2019-08-26 18:27
閱讀 3068·2019-08-26 11:46
閱讀 2234·2019-08-26 11:45
閱讀 3752·2019-08-26 10:12
