React組件實(shí)例三大屬性state props refs使用詳解
一、 State
1.概念
概念：state是組件對(duì)象最重要的屬性,值是對(duì)象(可以包含多個(gè)key:value的組合)，組件被稱(chēng)為狀態(tài)機(jī),通過(guò)更新組件的state來(lái)更新對(duì)應(yīng)的頁(yè)面顯示(重新渲染組件)，有state稱(chēng)為復(fù)雜組件。
2.State的簡(jiǎn)單用法
實(shí)現(xiàn)簡(jiǎn)單的切換效果，這里的效果是一種覆蓋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn{
width: 100px;
height: 40px;
background-color: red;
}
.on{
background-color: gray;
}
</style>
</head>
<body>
<div id="root"></div>
<!-- 引入react核心庫(kù) -->
<script src="js/react.development.js"></script>
<!-- 引入操作dom的擴(kuò)展庫(kù) -->
<script src="js/react-dom.development.js"></script>
<!-- 引入babel來(lái)解析jsx語(yǔ)法 -->
<script src="js/babel.min.js"></script>
<script type="text/babel">
class IsLike extends React.Component {
state = { flag:true }
//箭頭函數(shù)this指向上下文，靜態(tài)不可改變
changeFlag=()=>{
this.setState({flag:!this.state.flag})
}
render() {
const {flag}=this.state
return (
<div>
<button className={flag?'btn':'btn on'} onClick={this.changeFlag}>{flag?'喜歡':'不喜歡'}</button>
</div>
)
}
}
ReactDOM.render(<IsLike/>,document.getElementById('root'))
</script>
</body>
</html>
編輯
3. JS綁定事件
let btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert('按鈕被點(diǎn)擊了!');
})
btn.onclick = function(){
alert('按鈕被點(diǎn)擊了!');
}
function demo(){
alert('按鈕被點(diǎn)擊了');
}
4.react 綁定事件
render(){
return <a href='javascript:;' onClick={demo} className='btn'>{this.state.isflag?'已關(guān)注':'取消關(guān)注'}</a>
}
說(shuō)明：
·onclick 變?yōu)?onClick。
·{函數(shù)名}返回值給click，加()就會(huì)直接調(diào)用。
5.react this指向問(wèn)題
demo(){ console.log(this);//undefined
console.log('事件被點(diǎn)擊了');
}
舉例說(shuō)明：
class Person{
constructor(name,age) {
this.name = name;
this.age = age;
}
say(){
console.log(this);
}
}
const p1 = new Person('張三',18);
p1.say();//p1為實(shí)例對(duì)象
const p2 = p1.say;
p2();//undefined 類(lèi)采取是嚴(yán)格模式
6.修改state值
class MyClass extends React.Component{
constructor(props) {
super(props);
this.state = {isflag:true};
this.demo = this.demo.bind(this);
}render(){
return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已關(guān)注':'取消關(guān)注'}</a>
}
demo(){
this.setState({isflag:!this.state.isflag})
}}
ReactDOM.render(<MyClass/>,document.getElementById('root'));
說(shuō)明：
bind會(huì)生成一個(gè)新的方法 并傳對(duì)象 改變this的指向必須使用setState 修改才有效，修改內(nèi)容為合并。有值得修改沒(méi)有的不動(dòng)
7.代碼簡(jiǎn)寫(xiě)
class MyClass extends React.Component{
state = {isflag:true}
render(){
return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已關(guān)注':'取消關(guān)注'}</a>
}
demo = () => {
this.setState({isflag:!this.state.isflag})
}
}
ReactDOM.render(<MyClass/>,document.getElementById('root'));
說(shuō)明：
類(lèi)中的屬性直接賦值，省去構(gòu)造函數(shù)。
自定義方法—用賦值語(yǔ)句的形式+箭頭函數(shù)
二、props
1.概念
每個(gè)組件對(duì)象都會(huì)有props(properties的簡(jiǎn)寫(xiě))屬性。
組件標(biāo)簽的所有屬性都保存在props中。
props 是不可變的，只能通過(guò) props 來(lái)傳遞數(shù)據(jù)。
2.傳參的基礎(chǔ)方法、運(yùn)算符傳參
其中先通過(guò)let創(chuàng)建了一個(gè)對(duì)象，在通過(guò)三點(diǎn)運(yùn)算符，來(lái)遍歷得到，對(duì)象里面的值
在通過(guò)對(duì)象結(jié)構(gòu)得到props中的realname和age,GetName是Person組件的子組件，在Person中傳值給GetName,GetName通過(guò)props接收
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<!-- 引入react核心庫(kù) -->
<script src="js/react.development.js"></script>
<!-- 引入操作dom的擴(kuò)展庫(kù) -->
<script src="js/react-dom.development.js"></script>
<!-- 引入babel來(lái)解析jsx語(yǔ)法 -->
<script src="js/babel.min.js"></script>
<script type="text/babel">
class GetName extends React.Component {
render() {
return (
<div>姓名：{this.props.realname}</div>
);
}
}
class Person extends React.Component {
render() {
const {realname,age} = this.props
return (
<div>
<GetName realname={this.props.realname}/>
<span>年齡：{age}</span>
</div>
);
}
}
let p1 = {realname:'張三',age:19}
ReactDOM.render(<Person {...p1}/>,document.getElementById('root'))
</script>
</body>
</html>
三、refs
定義
組件內(nèi)的標(biāo)簽可以定義ref來(lái)標(biāo)識(shí)自己。
字符串形式的ref、回調(diào)函數(shù)下ref、createRef 創(chuàng)建ref容器
字符串形勢(shì)，是直接通過(guò)ref綁定值，通過(guò)在點(diǎn)擊事件中獲取ref的值，ref如同把整個(gè)input表單傳了過(guò)來(lái)，在獲取值的時(shí)候需要點(diǎn)一下value來(lái)獲取的是input表單的內(nèi)容
通過(guò)ref中的箭頭函數(shù)，綁定了值，在方法中直接獲取即可，穿過(guò)來(lái)時(shí)，由于react的編譯不需要寫(xiě)target但是，還是需要點(diǎn)出value
通過(guò)createRef來(lái)創(chuàng)建兩個(gè)容器，通過(guò)對(duì)象的形勢(shì)與ref綁定，直接就可以在方法中得到值，不過(guò)這里要注意，打印還是獲取的時(shí)候在點(diǎn)value之前點(diǎn)一個(gè)current,如this.realname.current.value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<!-- 引入react核心庫(kù) -->
<script src="js/react.development.js"></script>
<!-- 引入操作dom的擴(kuò)展庫(kù) -->
<script src="js/react-dom.development.js"></script>
<!-- 引入babel來(lái)解析jsx語(yǔ)法 -->
<script src="js/babel.min.js"></script>
<script type="text/babel">
class Person extends React.Component {
//createRef 創(chuàng)建ref容器
realname = React.createRef()
age = React.createRef()
ShowInfo=()=>{
//字符串
// const {realname,age}=this.refs
// console.log(`姓名：${realname.value}年齡：${age.value}`);
//回調(diào)函數(shù)
// let realname = this.realname.value
// let age = this.age.value
// console.log(`姓名：${realname}年齡：${age}`);
//類(lèi)綁定
console.log(this.realname.current.value);
console.log(this.age.current.value);
}
render() {
return (
/*字符串形勢(shì)
<div>
<p><input type="text" placeholder="請(qǐng)輸入姓名" ref='realname'/></p>
<p><input type="text" placeholder="年齡" ref='age'/></p>
<p><button onClick={this.ShowInfo}>提交</button></p>
</div>
*/
//回調(diào)函數(shù)
// <div>
// <p><input type="text" placeholder="請(qǐng)輸入姓名" ref={e=>this.realname=e}/></p>
// <p><input type="text" placeholder="年齡" ref={e=>this.age=e}/></p>
// <p><button onClick={this.ShowInfo}>提交</button></p>
// </div>
//createRef 創(chuàng)建ref容器
<div>
<p><input type="text" placeholder="請(qǐng)輸入姓名" ref={this.realname}/></p>
<p><input type="text" placeholder="年齡" ref={this.age}/></p>
<p><button onClick={this.ShowInfo}>提交</button></p>
</div>
);
}
}
ReactDOM.render(<Person/>,document.getElementById('root'))
</script>
</body>
</html>
以上就是React組件實(shí)例三大屬性state props refs使用詳解的詳細(xì)內(nèi)容，更多關(guān)于React組件state props refs的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React-Hook中使用useEffect清除定時(shí)器的實(shí)現(xiàn)方法
這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時(shí)器),主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時(shí)器，需要的朋友可以參考下2022-11-11
react.js 父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的示例代碼
本篇文章主要介紹了react.js 父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的示例代碼，2017-09-09
react源碼中的生命周期和事件系統(tǒng)實(shí)例解析
這篇文章主要為大家介紹了react源碼中的生命周期和事件系統(tǒng)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了react中涉及的增加,刪除list方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
一文詳解React如何處理表單的復(fù)雜驗(yàn)證邏輯
這篇文章主要為大家詳細(xì)介紹了React中如何處理表單的復(fù)雜驗(yàn)證邏輯,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
React-Native 橋接iOS原生開(kāi)發(fā)詳解
本篇文章主要介紹了React-Native 橋接iOS原生開(kāi)發(fā)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
本文主要介紹了React組件中默認(rèn)封裝了很多屬性，有的是提供給開(kāi)發(fā)者操作的，其中有三個(gè)屬性非常重要：state、props、refs。感興趣的小伙伴可以參考閱讀2023-03-03
TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類(lèi)組件中this綁定
這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類(lèi)組件中this綁定，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
如何使用 React Router v6 在 React 中
面包屑在網(wǎng)頁(yè)開(kāi)發(fā)中的角色不可忽視,它們?yōu)橛脩?hù)提供了一種跟蹤其在網(wǎng)頁(yè)中當(dāng)前位置的方法,并有助于網(wǎng)頁(yè)導(dǎo)航,本文介紹了如何使用react-router v6和bootstrap在react中實(shí)現(xiàn)面包屑,感興趣的朋友一起看看吧2024-09-09
基于React編寫(xiě)一個(gè)全局Toast的示例代碼
前些日子在做項(xiàng)目的時(shí)候,需要封裝一個(gè)Toast組件,我想起之前用過(guò)的庫(kù),只要在入口文件中引入就可以在全局中使用,還是很方便的,借這次機(jī)會(huì)也來(lái)實(shí)現(xiàn)一下,所以本文介紹了React中如何編寫(xiě)一個(gè)全局Toast,需要的朋友可以參考下2024-05-05