目录state的基本使用setState()修改状态解决方法：总结state的基本使用 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用 state的值是对象，可以
状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，可以通过this.state来获取状态。
状态是可变的，可以通过this.setState({要修改的数据})来改变状态
注意：跟Vue语法不同，不要直接修改state中的值，这时错误的！
//正确
this.setState({
count:this.state.count+1
})
//错误
this.state.count+=1最后结合以上内容，写了一个简单的累加器,但是在此之前，我们需要解决this在自定义的方法中的指向问题，否则this指向会为undefined，我们一般希望this指向组件实例。
1.箭头函数
利用箭头函数自身不绑定this的特点
class App extends React.Component{
state={
count:0,
}
render(){
// 箭头函数中的this指向外部韩静，此处指向render()方法
return (
<div>
<span>总数：{this.state.count}</span>
<button onClick={()=>{
this.setState({
count:this.state.count+1
})
}}>点击+1</button>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'));但是这种方法会导致jsX语法中代码过于繁杂，不利于表明项目结构，一般不推荐使用。
2.Function.prototype.bind()
利用ES5中的bind方法，将事件处理程序中的this与组件示例绑定到一起
class App extends React.Component{
constructor(){
super()//super()必须写，这时es6语法中class的一个要求
//此时可将state放到constructor()中
this.state={
count:0,
}
this.add=this.add.bind(this)//将this指向绑定到实例
}
//事件处理程序
add(){
this.setState({
count:this.state.count+1
})
}
render(){
// 箭头函数中的this指向外部韩静，此处指向render()方法
return (
<div>
<span>总数：{this.state.count}</span>
<button onClick={this.add}>点击+1</button>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'));3.class的示例方法
利用箭头函数形式的class实例方法，此方法比较简洁，强烈推荐
注意：该语法是实验性语法，但是由于脚手架中babel的存在，可以直接使用
class App extends React.Component{
state={
count:0,
}
add=()=>{
this.setState({
count:this.state.count+1
})
}
render(){
// 箭头函数中的this指向外部韩静，此处指向render()方法
return (
<div>
<span>总数：{this.state.count}</span>
<button onClick={this.add}>点击+1</button>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'));本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: React组件中的state和setState()你知道多少
本文链接: https://www.lsjlt.com/news/143041.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0