react 属性
1.state
state demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>state简写方式</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component{
state = {isHot: false,wind: "微风"}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot?"炎热":"凉爽"},{wind}</h1>
}
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Weather/>,document.getElementById("test"))
</script>
</body>
</html>
state
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>component state properties</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component{
//构造器调用几次？ --------1次
constructor(props){
console.log('constructor')
super(props)
//初始化状态
this.state={isHot:false,wind:'微风'}
//解决changeWeather中的this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用几次?---------------1+n次 1是初始化的那次 n是状态更新的次数
render(){
console.log('render')
const {isHot,wind} = this.state
console.log("isHot:" + this.state.isHot + " wind:" + this.state.wind)
return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'},{wind}</h1>
}
//changeWeather调用几次？------页面点击几次就调用几次
changeWeather(){
//changeWeather放在哪里？-----Weather的原型对象上，供实例使用
console.log("changeWeather")
const isHot = this.state.isHot
this.setState({isHot: !isHot})
console.log(this)
//不可直接this.state.isHot = !isHot,必须通过setState更新state
}
}
ReactDOM.render(<Weather/>,document.getElementById("test"))
</script>
</body>
</html>
2.props
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>component props simple method</title>
</head>
<body>
<div id = "test1"></div>
<div id = "test2"></div>
<div id = "test3"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
class Person extends React.Component{
constructor(props){
super(props)
console.log('constructor',this.props);
}
static propTypes = {
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
}
static defaultProps = {
sex: "男",
age: 18
}
render(){
const {name,age,sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="jerry"/>,document.getElementById("test1"))
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>props基本使用</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Person extends React.Component{
render(){
console.log(this)
const {name,age,sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="slq" age={19} sex="男"/>,document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={20} sex="女"/>,document.getElementById('test2'))
const p = {name:'老刘',age:18,sex:'女'}
console.log("@",...p);
//ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
</script>
</body>
</html>
props指定属性类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>components props restrict</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
class Person extends React.Component{
render(){
// console.log(this);
const {name,age,sex} = this.props
// this.props.name = 'jack'
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
Person.propTypes = {
name: PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number,
speak:PropTypes.func, //限制speak为函数
}
Person.defaultProps = {
sex: '男',
age: 18
}
ReactDOM.render(<Person name={"slq"} speak={speak}/>,document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))
const p = {name:"老刘",age:18,sex:"女"}
ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))
function speak(){
console.log("我说话了")
}
</script>
</body>
</html>
函数组件使用props
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>函数组件使用props</title>
</head>
<body>
<div id="test1"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
function Person(props){
const {name,age,sex} = props
return (
<ul>
<li>姓名： {name}</li>
<li>性别： {sex}</li>
<li>年龄： {age}</li>
</ul>
)
}
Person.propTypes = {
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
}
Person.defaultProps = {
sex: "男",
age: 18
}
ReactDOM.render(<Person name="slq"/>,document.getElementById('test1'))
</script>
</body>
</html>
3.ref
创建ref
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>component createref</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component{
myRef = React.createRef()
myRef2 = React.createRef()
showData = ()=>{
alert(this.myRef.current.value);
}
showData2 = ()=>{
alert(this.myRef2.current.value);
}
render(){
return(
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
this.refs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>component ref</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component{
showData = () => {
const {input1} = this.refs
alert(input1.value)
}
showData2 = () => {
const {input2} = this.refs
alert(input2.value)
}
render(){
return(
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById("test1"))
</script>
</body>
</html>
回调方式refs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>component ref callback</title>
</head>
<body>
<div id="test1"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component{
showData = () => {
const {input1} = this
alert(input1.value)
}
showData2 = () => {
const {input2} = this
alert(input2.value)
}
render(){
return(
<div>
<input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点击我提示左侧数据</button>
<input onBlur={this.showData2} ref={c => this.input2 = c} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test1'))
</script>
</body>
</html>
回调方式调用次数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>回调ref中执行次数</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component{
state = {isHot:false}
showInfo = () => {
const {input1} = this
alert(input1.value)
}
changeWeather = ()=>{
const {isHot} = this.state
this.setState({isHot:!isHot})
}
saveInput = (c) => {
this.input1 = c;
console.log("@")
}
render(){
const {isHot} = this.state
return(
<div>
<h2>今天天气很{isHot?"炎热":"凉爽"}</h2>
{/*<input ref={(c=>{this.input1 = c;console.log("@");})} type="text"/>*/}
<input ref={this.saveInput} type="text"/><br/><br/>
<button onClick={this.showInfo}>点我提示输入的数据</button> <br/>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
</body>
</html>
爱自己哦
