state是在constructor中的,是组件中的数据储存库,
和vue的data的作用是一样的。不过不同的是,state里面的数据不能直接进行修改。
如果需要修改state中的数据的话,需要使用setState这个方法。
import React, { Component } from 'react'
class Value extends React.Component {
constructor(props){
super(props);
this.state={
inputValue:'hei', //input中的值
}
}
render() {
return (
<div>
<input
value={this.state.inputValue} {/*value绑定,像vue的 :value */}
onChange={this.handleInputChange.bind(this)} {/*这里的bind.(this)是为了指向state中的状态*/}
/>
</div>
)
}
handleInputChange(e){
this.setState({ //使用setState改变state中的数据
inputValue : e.target.value
})
// this.state.inputValue = e.target.value; //这样写是错误的
// console.log(e.target.value) //查看当前的value值
}
}
export default Value;
以上通过一个简单的demo为大家解释这个setState,各位可以自己创建一个value.js文件来检测一下。
如果有任何意义上的错误或者你有什么可以补充的知识点欢迎下方留言,
我是海星吧,咱们下一篇见。
弱鸡程序员年底还在加班