1.知識點回顧(2)
1.事件繫結
demo
//點選執行的函式
function handleClick() {
console.log('handleKeyDown')
};
//鍵盤按下的函式
function handleKeyDown() {
console.log('handleKeyDown')
};
const element1 = (
<div>
<input
type="button"
value="自執行"
onClick={alert('自執行')}
/>
<br />
<input
type="button"
value="箭頭函式"
onClick={()=>{alert('箭頭函式')}}
/>
<br />
<input
type="button"
value="事件呼叫函式"
onClick={ handleClick}
/>
<br />
<input type="text" defaultValue="keydown" onKeyDown={handleKeyDown}/>
</div>
);
ReactDOM.render(
element1,
document.querySelector('#app')
);
複製程式碼開啟網頁 會先自動彈出alert彈窗;點選箭頭函式，彈出alert彈窗
效果圖：
2.傳參，使用bind
回顧：call和bind：call會自執行;bind不會
bind(this指向,引數)
// 函式 的[最後]一個引數 是 事件物件event
function handleClick(data,e) {
console.log('handleClick');
console.log(data);
console.log(e);
console.log(e.target);
};
const element2 = (
<div>
<input
type="button"
value="事件呼叫函式"
onClick={ handleClick.bind(this,'這才是傳參') }
/>
</div>
);
ReactDOM.render(
element2,
document.querySelector('#app')
)
複製程式碼效果圖：
3.元件
以上例子中的element都只是一個普通變數，是沒有狀態的。
區別是否是元件，也就是看有狀態或者無狀態。
狀態: 讓資料驅動檢視的響應式資料。
這些資料存放在一個地方，方便於管理 state = {}，例如：state = {arr:[],title:''}
1.宣告式無狀態元件
宣告一個有名的函式元件，此時也只是一個無狀態的元件
function Head(){
return (
<header> 這是頁面頭部 </header>
)
};
function Main(){
return (
<main> 這是頁面主體內容 </main>
)
};
function Foot(){
return (
<footer> 這是頁面底部 </footer>
)
};
let element = (
<div>
<Head></Head>
<Main></Main>
<Foot></Foot>
</div>
);
ReactDOM.render(
element,
document.querySelector('#app')
);
複製程式碼效果圖：
2.宣告式有狀態元件
用class宣告,extends繼承React中的Component元件
// 有狀態的元件
// 定義 Head元件 繼承自 React的 component元件
// 那麼 就可以去呼叫 React的 component元件所提供的 方法或屬性
class Head extends React.Component {
constructor(){
super(); // 執行父類的建構函式
this.name = 'sjl';
this.age = 18;
}
// 不要寫function
say(){
console.log('say方法');
}
render(){ // 渲染
return (
<header> 這是真正的有狀態的元件 頭部 </header>
)
}
};
let element = (
<div>
<Head></Head>
</div>
);
ReactDOM.render(
element,
document.querySelector('#app')
);
複製程式碼3.元件傳值
demo
class Head extends React.Component {
constructor(){
// 如果 不在 constructor構造裡面 用例項物件上的props （this.props）那麼可以不用傳參
super(...arguments); // 執行父類的建構函式,接收引數
this.name = 'sjl';
this.age = 18;
// 物件裡面的資料 是從後端返回的
// state是負責當前元件（Head）的使用者介面
// 如果 state裡面的資料 發生改變 檢視就會自動更新 -> 響應式資料
this.state = {
abc: this.props.text
}; //接受<Head></Head>中的text
}
render(){ // 渲染
return (
<div>
<header>
{ this.state.abc && this.state.abc }
</header>
</div>
)
}
};
let element = (
<div>
<Head text='這是真正的有狀態的元件 頭部'></Head>
</div>
);
ReactDOM.render(
element,
document.querySelector('#app')
);
複製程式碼效果圖：
4.setState()
setState()方法可以改變資料
class Head extends React.Component {
constructor(){
super(...arguments);
this.name = 'sjl';
this.age = 18;
this.state = {
abc: this.props.text
};
}
handleClick1(data, e){
console.log(this);
console.log(data);
console.log(e);
this.setState({
abc: '重新賦值'
})
}
handleClick2(data, e){
console.log(e);
console.log(data);
}
render(){
return (
<div>
{
//第一種寫法
}
<header onClick={this.handleClick1.bind(this,"傳來的資料")}>
{ this.state.abc && this.state.abc }
</header>
{
//第二種寫法
//箭頭函式中的this指向父級作用於，也就是Head例項
}
<header onClick={(e) => {this.handleClick2("第二種", e)}}>
{ this.state.abc && this.state.abc }
</header>
</div>
)
}
};
let element = (
<div>
<Head text='這是真正的有狀態的元件 頭部'></Head>
</div>
);
ReactDOM.render(
element,
document.querySelector('#app')
);
複製程式碼點選第一種的效果圖：
5.表單元素注意點
- input單標籤需要閉合
- label標籤中的for屬性,在React中需要用htmlFor代替
const element = (
<div>
<input id={'txt'} type="text" />
<label htmlFor="txt"></label>
</div>
);
ReactDOM.render(
element,
document.querySelector('#app')
);
複製程式碼-
自動獲取焦點屬性focus,用autoFocus代替
<input type="text" autoFocus/> -
checked屬性，用defaultChecked代替