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