标签:手动 tin 推荐 type NPU ajax 数据 ons 组件
受控组件
,因为其更符合react的思想,不需要进行DOM的操作,而且react也不推荐过多的使用refsclass Login extends React.Component {
constructor(props){
super(props)
this.state = {
age:18
}
this.handleSubmit = this.handleSubmit.bind(this)
this.handleChange = this.handleChange.bind(this)
}
handleSubmit(event){
event.preventDefault();
// 通过旧的refs获取username
const username = this.refs.username.value
// 通过新的refs获取username
const pwd = this.pwd.value
// 通过状态获取age
const {age} = this.state
console.log(username,pwd,age);
}
handleChange(event){
// 由于原生的onchange事件并不是真的在change时触发事件,而是在失去焦点的时候才会触发change事件
// react在onChange事件做了优化,会在change的时候就触发事件
const age = event.target.value
this.setState({
age
})
}
render(){
return (
<form action="" method="get" onSubmit={this.handleSubmit}>
<p>
username: <input type="text" ref="username" />
</p>
<p>
password: <input type="password" ref={input => this.pwd = input} />
</p>
<p>
age: <input type="number" value={this.state.age} onChange={this.handleChange} />
</p>
<p>
<input type="submit" value="login" />
</p>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById(‘app‘))
// 定义组件
class Life extends React.Component{
constructor(props){
super(props)
this.state = {
opacity:1,
color:`#f0f`
}
this.cancelTime = this.cancelTime.bind(this)
}
componentDidMount(){
// 定时器作用域问题
// 1. 通过bind解决
// 2. 箭头函数
this.timer = setInterval( function() {
let {opacity} = this.state
opacity -= 0.1
//不能使用opacity === 0
// 因为js的计算存在误差
if(opacity <= 0){
opacity = 1
}
this.setState({
opacity
})
}.bind(this),200)
}
cancelTime(){
// 移除组件
ReactDOM.unmountComponentAtNode(document.getElementById(‘app‘))
}
componentWillUnmount(){
// 销毁组件之前的勾子
// 定时器必须清除,不然会造成内存泄露的问题
clearInterval(this.timer)
}
render(){
const {msg} = this.props
const {...style} = this.state
return (
<div>
<h1 style={style} >{msg}</h1>
<button onClick={this.cancelTime}>取消定时器</button>
</div>
)
}
}
// 渲染组件
ReactDOM.render(<Life msg="生命周期演示"/>,document.getElementById(‘app‘))
问题
样式绑定,首先将样式存在state中,在render中将样式帮上
//方式2:绑定样式
// 因为绑定样式是在js中使用,所以样式是使用对象的方式传入
const {opacity,color} = this.state
//这里需要使用双花括号,因为是在js中绑定样式,样式在一个对象中以键值对的形式存在
<h1 style={{opacity,color}} >{msg}</h1>
//方式2:绑定样式
// 使用...将样式以对象的方式取出,可以直接绑定至样式上
const {...style} = this.state
<h1 style={style} >{msg}</h1>
定时器必须清除,不然会造成内存泄露的问题
标签:手动 tin 推荐 type NPU ajax 数据 ons 组件
原文地址:https://www.cnblogs.com/nordon-wang/p/9058550.html