欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React組件實例三大屬性state props refs使用詳解

 更新時間：2022年09月07日 15:54:55   作者：小余努力搬磚  
這篇文章主要為大家介紹了React組件實例三大屬性state props refs使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、 State

1.概念

概念：state是組件對象最重要的屬性,值是對象(可以包含多個key:value的組合)，組件被稱為狀態(tài)機,通過更新組件的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的擴展庫 -->
	<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 類采取是嚴格模式

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的簡寫)屬性。

組件標簽的所有屬性都保存在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的擴展庫 -->
	<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)的標簽可以定義ref來標識自己。

字符串形式的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的擴展庫 -->
	<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使用詳解的詳細內(nèi)容，更多關(guān)于React組件state props refs的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom

    react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom

    這篇文章主要介紹了react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-10-10
  • React中進行條件渲染的實現(xiàn)方法

    React中進行條件渲染的實現(xiàn)方法

    React是一種流行的JavaScript庫,它被廣泛應(yīng)用于構(gòu)建Web應(yīng)用程序,在React中,條件渲染是一個非常重要的概念,它允許我們根據(jù)不同的條件來呈現(xiàn)不同的內(nèi)容,在本文中,我們將探討React如何進行條件渲染,需要的朋友可以參考下
    2023-11-11
  • react中使用forEach或map兩種方式遍歷數(shù)組

    react中使用forEach或map兩種方式遍歷數(shù)組

    這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • React?SSG實現(xiàn)Demo詳解

    React?SSG實現(xiàn)Demo詳解

    這篇文章主要為大家介紹了React?SSG實現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>
    2023-07-07
  • D3.js(v3)+react 實現(xiàn)帶坐標與比例尺的柱形圖 (V3版本)

    D3.js(v3)+react 實現(xiàn)帶坐標與比例尺的柱形圖 (V3版本)

    這篇文章主要介紹了D3.js(v3)+react 制作 一個帶坐標與比例尺的柱形圖 (V3版本) ，本文通過實例代碼文字相結(jié)合的形式給大家介紹的非常詳細,需要的朋友可以參考下
    2019-05-05
  • React DnD如何處理拖拽詳解

    React DnD如何處理拖拽詳解

    這篇文章主要為大家介紹了React DnD如何處理拖拽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-10-10
  • 使用Redux處理異步問題

    使用Redux處理異步問題

    這篇文章主要介紹了使用Redux處理異步問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 使用?React?Hooks?重構(gòu)類組件的示例詳解

    使用?React?Hooks?重構(gòu)類組件的示例詳解

    這篇文章主要介紹了如何使用?React?Hooks?重構(gòu)類組件,本文就來通過一些常見示例看看如何使用 React Hooks 來重構(gòu)類組件，需要的朋友可以參考下
    2022-07-07
  • react diff算法源碼解析

    react diff算法源碼解析

    這篇文章主要介紹了react diff算法源碼解析的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下
    2021-04-04
  • React性能debug場景解決記錄

    React性能debug場景解決記錄

    這篇文章主要為大家介紹了React性能debug場景解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-05-05

最新評論