1.双向数据绑定
class TwoWay extends React.Component{
constructor(props){
super(pros);
this.state={
msg:'sdfdfd'
}
}
handleChange(){
let msg=event.target.value;
this.setState({msg})
}
render(){
return(
<div>
<input type='text' value={this.state.msg} onChange={this.state.handleChange.bind(this)}/>
<p>{this.state.msg}</p>
</div>
)
}
}
reactDOM.render(<TwoWay/>,document.getElementById('root'))
2.让指定的文件做显示、隐藏的动画
class AnimateComp extends React.Component{
constructor(){
super();
this.state={
opacity:1.0
}
}
componentDidMount(){
//自动循环定时器
this.intervalId=setInterval(()=>{
console.log('-----------')
let opacity=this.state.opacity;
//更新opacity
opacity -= 0.05；
if(opactity<=0){
opacity =1.0
}
//更新state
this.setState({opacity})
},1000)
setTimeout(()=>{
//移除组件,--有这个必须要后面的清除定时器
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
},5000)
}
componentWillUnmount(){
//移除定时器
clearInterval(this.intervalId)
}
render(){
return <p style={{opacity:this.state.opacity}}> {this.props.msg}</p>
}
}
const msg ='I will go to school';
ReactDOM.render(<AnimateComp msg={msg}/>,document.getElementById('root'))