react的三大屬性 state props refs
- props 來自外部屬性
- states 來自內部狀態
- refs 用於表示組件內某個元素
state基礎（最重要的屬性）
- state是組件對象最重要的屬性，其值是對象，即可以包含多個數據
- 可以通過更新組件的state來更新對應的頁面的顯示（重新進行組件渲染）
state 操作
初始化狀態
constructor(props){ super(props) this.state = { //this是一個組件對象 stateProp1: value1, stateProp2: value2 } }
讀取某個狀態值
this.state.statePropertyName
更新狀態，組件界面更新
this.setState({ stateProp1: value1, stateProp2: value2 })
state屬性示例–監聽點擊事件，然后狀態改變
定義組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
class Myname extends React.Component {
constructor (props) {
//調用父類的構造函數
super(props)
//1、初始化狀態——固定寫法
this.state = {
isMyname: true
}
//[注意]將新增的方法中的this強制綁定為組件對象_bind()方法產生一個與handleClick()一樣的方法
this.change = this.change.bind(this)
}
//新增自定義方法:內部的this默認不是組件對象，而是undefined
change () {
//3、更新狀態，需要讓this指向組件對象
this.setState({
isMyname: !this.state.isMyname
})
}
//重寫組件類方法
render () {
const text = this.state.isMyname ? '我是ImagineCode' : '哈哈哈'
return <h2 onClick={this.change}>{text}</h2>
}
}
ReactDOM.render(<Myname />, document.getElementById('test'))
</script>
</body>
</html>
props 屬性
作用：復用
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
// 1、定義組件:方式1
function Person(props) {
return (
<ul>
<li>name：{props.name}</li>
<li>age：{props.age}</li>
<li>sex：{props.sex}</li>
</ul>
)
}
//方式2：使用類方式定義組件（運行時請將其中一個方式注釋）
class Person extends React.Component {
render() {
return (
<ul>
<li>name：{this.props.name}</li>
<li>age：{this.props.age}</li>
<li>sex：{this.props.sex}</li>
</ul>
)
}
}
//指定默認值
Person.defaultProps = {
name:'imaginecode',
age: 17,
sex:'woman'
}
//指定屬性值的類型和必要性--使用prop-types.js庫
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number.isRequired,
}
// 2、渲染組件標簽
const p1 = {
name:'imaginecode',
age: 19,
sex:'man'
}
ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('test1'));
const p2 = {
name:'imaginecode2'
}
ReactDOM.render(<Person name={p2.name}/>,document.getElementById('test2'));
</script>
</body>
</html>
為組件指定默認屬性值，組件屬性defaultProps：
Person.defaultProps = {name:''}
對props中的屬性值進行類型限制和必要性限制,組件屬性propTypes：
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number.isRequired
}
refs 屬性
（1）ref用於標識組件內部某個元素
（2）refs 是標識集合
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="text1"></div>
<div id="text2"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//1、先定義組件
class InputComp extends React.Component {
constructor(props) {
super(props)
//先對自定義函數進行bind操作
this.showInput = this.showInput.bind(this);
this.handleBlur = this.handleBlur.bind(this);
}
showInput(event) {
console.log(this);
alert(this.inputVal.value);
}
handleBlur(event) {//利用所有的事件均有一個event屬性
alert(event.target.value);
}
render() {
return(
//this.inputVal=input 將當前input綁定到組件對象上。input代表當前這個input元素
<div>
<input type="text" ref={input => this.inputVal=input}/>
<button onClick={this.showInput}>點擊獲取值</button>
<input type="text" placeholder="失去焦點提示內容" onBlur={this.handleBlur}/>
</div>
)
}
}
//2、渲染組件標簽
ReactDOM.render(<InputComp />,document.getElementById('text1'));
</script>
</body>
</html>