React State(状态)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
计算器:
class Cont extends React.Component{
constructor(props){
super(props)
//组件内部的状态管理
//数据是可以引发页面响应的
this.state={
num:'',
text:''
}
}
getTextFun(e){
this.setState({
text: +e.target.value
})
}
getNumFun(){
this.setState({
num:this.props.number+this.state.text
})
}
render(){
return <div>
<span>{this.props.number}</span>
<span>+</span>
<input onChange={(e)=>{this.getTextFun(e)}} type="text"/>
<button onClick={()=>{this.getNumFun()}}>=</button>
<span>{this.state.num}</span>
</div>
}
}
let root = document.querySelector('#root');
ReactDOM.render(
<Cont number={10}/>,
root
)
效果图