React組件實例三大屬性state props refs使用詳解
一、 State
1.概念
概念：state是組件對象最重要的屬性,值是對象(可以包含多個key:value的組合)，組件被稱為狀態機,通過更新組件的state來更新對應的頁面顯示(重新渲染組件)，有state稱為復雜組件。
2.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>
編輯
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?'已關註':'取消關註'}</a>
}
說明：
·onclick 變為 onClick。
·{函數名}返回值給click，加()就會直接調用。
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?'已關註':'取消關註'}</a>
}
demo(){
this.setState({isflag:!this.state.isflag})
}}
ReactDOM.render(<MyClass/>,document.getElementById('root'));
說明：
bind會生成一個新的方法 並傳對象 改變this的指向必須使用setState 修改才有效，修改內容為合並。有值得修改沒有的不動
7.代碼簡寫
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
1.概念
每個組件對象都會有props(properties的簡寫)屬性。
組件標簽的所有屬性都保存在props中。
props 是不可變的，隻能通過 props 來傳遞數據。
2.傳參的基礎方法、運算符傳參
其中先通過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>
三、refs
定義
組件內的標簽可以定義ref來標識自己。
字符串形式的ref、回調函數下ref、createRef 創建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使用詳解的詳細內容，更多關於React組件state props refs的資料請關註WalkonNet其它相關文章！