最近學(xué)習(xí)淺嘗則止的學(xué)習(xí)了一下react.js這個UI的框架籍胯，react這個庫給我的最大的感覺就是它能夠完全的接管UI層，在要改變視圖的東西的時候只需要改變其this.state中的狀態(tài)冤今。只要操作數(shù)據(jù)層的東西視圖層就會發(fā)生變化，這一點我還是很喜歡的卤妒∨謇蹋可以擺脫對DOM的直接操作绞幌，畢竟直接來會比較復(fù)雜，本來應(yīng)該是邏輯層js中混雜著各種css的字符串一忱，對于我來說有點不爽（JSX中也混雜這標簽莲蜘，但我覺的不應(yīng)該把它看作標簽，看作語句會習(xí)慣一點）帘营。
回到幾天的重點票渠，講react組件之間的狀態(tài)傳遞。
上代碼：
1.定義兩個子組件child-1和child-2
//child-1 子組件-1為輸入框
class Input extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <input type="text"/>
}
}
//child-2 子組-2為顯示框
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <p></p>
}
}
2.定義父組件Parent并且將兩個子組件插入到父組件中
class Parent extends React.Component{
constructor(...args){
super(...args);
}
render(){
return(
<div>
<Input}/>
<Show/>
</div>
);
}
}
現(xiàn)在的任務(wù)是在組件1總輸入一些文字芬迄，同時在組件2中同時顯示出來问顷。
分析：要讓組件2與組件1同步，就讓組件1和2都去綁定父組件的狀態(tài)禀梳。也就是說讓兩個組件受控杜窄。數(shù)據(jù)的走向是，組件1將自身的數(shù)據(jù)提升到父層算途，并且保存在父層的狀態(tài)中塞耕。父層中的數(shù)據(jù)通過組件2中的props屬性傳遞到組件2中，并在視圖層進行綁定嘴瓤。
- 第一步先綁定<Show/>組件
//在父層中的constructor中定義狀態(tài)為一個空的message扫外，this.state = {message:''}
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
}
然后在父組件中的<Show/>改為
<Show onShow={this.state.message}/>
接著來我們進入到<Show/>組件中，給其內(nèi)容綁定這個穿件來的onShow屬性廓脆。<Show/>組件變?yōu)?/p>
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <p>{this.props.onShow}</p>
}
這樣組件2顯示層的數(shù)據(jù)已經(jīng)綁定好了筛谚，接下來我們只要改變父親層狀態(tài)中的message的內(nèi)容就可以使綁定的顯示層的內(nèi)容跟著一起變化
- 將輸入層的狀態(tài)(數(shù)據(jù))提升到父親組件中.下面是改寫后的組件1
class Input extends React.Component{
constructor(...args){
super(...args);
}
//將輸入的內(nèi)容更新到自身組件的狀態(tài)中,并且將改變后的狀態(tài)作為參數(shù)傳遞給該組件的一個自定義屬性onInp()
fn(ev){
this.props.onInp(ev.target.value);
}
render(){
//用onInput(注意react中采用駝峰寫法和原生的略有不同)綁定fn()函數(shù)
return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
}
}
看到這里可能會有一個問題:onInp()和content沒有啊?不要急,接著看
- 接著改寫父組件中的輸入層子組件1,
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
};
}
//傳進的text是其提升上來的狀態(tài),然后再更新父組件的狀態(tài)
fn(text){
this.setState({
message:text
})
}
render(){
return(
<div>
/*
onInp就出現(xiàn)在這里,并綁定一個函數(shù),
并且有一個content將父組件的狀態(tài)同步到子組件中
*/
<Input onInp={this.fn.bind(this)} content={this.state.message}/>
<Show onShow={this.state.message}/>
</div>
);
}
}
寫完的代碼是這樣的
// 父組
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
};
}
onInp(text){
this.setState({
message:text
})
}
render(){
return(
<div>
<Input onInp={this.onInp.bind(this)} content={this.state.message}/>
<Show onShow={this.state.message}/>
</div>
);
}
}
//child-1
class Input extends React.Component{
constructor(...args){
super(...args);
}
fn(ev){
this.props.onInp(ev.target.value);
}
render(){
return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
}
}
//child-2
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <p>{this.props.onShow}</p>
}
}
//最后渲染出
ReactDOM.render(
<Parent/>,
document.getElementById('app')
);
