溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“React組件的屬性state、props和refs如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React組件的屬性state、props和refs如何使用”吧!
概念：state是組件對象最重要的屬性,值是對象(可以包含多個key:value的組合)，組件被稱為狀態機,通過更新組件的state來更新對應的頁面顯示(重新渲染組件)，有state稱為復雜組件。
實現簡單的切換效果，這里的效果是一種覆蓋
<!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 }
//箭頭函數this指向上下文，靜態不可改變
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>let btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert('按鈕被點擊了!');
})
btn.onclick = function(){
alert('按鈕被點擊了!');
}
function demo(){
alert('按鈕被點擊了');
}render(){
return <a href='javascript:;' onClick={demo} className='btn'>{this.state.isflag?'已關注':'取消關注'}</a>
}說明：
·onclick 變為 onClick。
·{函數名}返回值給click，加()就會直接調用。
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 類采取是嚴格模式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?'已關注':'取消關注'}</a>
}
demo(){
this.setState({isflag:!this.state.isflag})
}}
ReactDOM.render(<MyClass/>,document.getElementById('root'));說明：
bind會生成一個新的方法 并傳對象 改變this的指向必須使用setState 修改才有效，修改內容為合并。有值得修改沒有的不動
class MyClass extends React.Component{
state = {isflag:true}
render(){
return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已關注':'取消關注'}</a>
}
demo = () => {
this.setState({isflag:!this.state.isflag})
}
}
ReactDOM.render(<MyClass/>,document.getElementById('root'));說明：
類中的屬性直接賦值，省去構造函數。
自定義方法—用賦值語句的形式+箭頭函數
每個組件對象都會有props(properties的簡寫)屬性。
組件標簽的所有屬性都保存在props中。
props 是不可變的，只能通過 props 來傳遞數據。
其中先通過let創建了一個對象，在通過三點運算符，來遍歷得到，對象里面的值
在通過對象結構得到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>組件內的標簽可以定義ref來標識自己。
字符串形勢，是直接通過ref綁定值，通過在點擊事件中獲取ref的值，ref如同把整個input表單傳了過來，在獲取值的時候需要點一下value來獲取的是input表單的內容
通過ref中的箭頭函數，綁定了值，在方法中直接獲取即可，穿過來時，由于react的編譯不需要寫target但是，還是需要點出value
通過createRef來創建兩個容器，通過對象的形勢與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 創建ref容器
realname = React.createRef()
age = React.createRef()
ShowInfo=()=>{
//字符串
// const {realname,age}=this.refs
// console.log(`姓名：${realname.value}年齡：${age.value}`);
//回調函數
// 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>
*/
//回調函數
// <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 創建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如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
