这篇博客详细介绍了React组件的状态（props和state）及其区别。重点讲解了如何使用state来更新组件状态，包括初始化state、获取和修改state的方法。同时，文章还探讨了事件处理，包括事件绑定、事件中的this问题及其解决方案。此外，文中还阐述了受控和非受控组件的概念，并给出了使用state获取和更新文本框及单选框值的示例代码。
React状态
所有组件都会产生state对象
props：只能获取里面的值，不能修改，就算修改了也没用
state：获取和改变值
一：组件状态更新
1.使用ref获取节点，并获取节点的内容
-
创建ref对象
this.xxx = React.createRef(); -
获取ref节点
this.xxx.current
实例：
class Addcount extends React.Component{
//构造函数
constructor(){
super();
this.input = React.createRef();
}
//获取文本框里面的值
hanleInput = ()=>{
console.log(this.input.current.value);
}
render(){
return <div>
<div>
{/*当给文本框一个初始值value之后，（受空组件），点击文本框输入值不能输入了*/}
<input type="text" ref={this.input} value={this.state.value} onInput={this.handleValue}/>
<input type="button" value="增获取加" onClick={this.hanleInput}/>
</div>
</div>
}
}
ReactDOM.render(<Addcount />,document.getElementById("root"))
2.使用state对象
-
初始化state
constructor(){ super(); //一般构造方法都是先调用父类的构造函数，不然this不能用，super的意思是调用父类的构造函数 this.state = { count:0, value:"", gender:"female" } } -
获取state
<p>{this.state.count}</p> -
设置state
this.setState({ count:this.state.count + 1 })
二：props和state对比
相同点：二者都是组件内部提供的对象
props：
- 用于组件之间传递数据
- 通过自定义属性或标签之间的内容传递
- 单向传递
- 可以手动设置，但手动设置的话不会更新组件状态，但是通过父组件传值过来更改的话，就会更新组件状态
state：
- 每个组件都可以初始化state对象
- state本身不能传递，传递只能利用props，但是值可以传递
- 可以设值，对象的组件状态会更新
- 设值方法必须是setState，而不是直接使用this.state
三：事件处理
-
在HTML中组件通过绑定事件处理方法来处理相应事件
绑定的属性名前一定要加
on,并且使用驼峰命名法 -
非HTMl组件不能处理事件，但是可以通过
props传递可以是字符串，函数，对象
事件中的this
ES6的类中，事件处理方法的this为undefined
解决方法
-
在构造函数中将当前对象绑定给方法中的this
this.hanleCount= this.handleCount.bind(this) -
似乎用箭头函数定义方法
handleCount=(e)=>{...} -
在绑定事件时使用bind方法
onClick={this.handleCount.bind(this)} -
在绑定事件时使用箭头函数
onClick={e=>this.handleCount(e)}
四：受控和非受控组件
-
文本框设置了value属性
-
单选或多选设置了checked属性
-
如何让受控组件可更改
-
使用state设置值
-
绑定onChange事件
-
在事件处理方法中获取组件的值并更改state
<input type="text" value={this.state.value} onChange={(e)=>{this.setState({value:e.target.value})}} >
-
五：state
1.使用之间必须得初始化（在构造函数里面）
2.绑定事件
3.获取this.state
4.修改,必须在setState里面的修改this.setState({count:this.state.count+1})
setState是一个异步方法，因为这个操作不仅仅只是改值，还要进行DOM操作
操作步骤
ref相当于是给他一个标识，后面就通过这个标识来获取它，但是不能修改它，不推荐使用
1.state来增加数值
onClick
1.绑定
render(){
return <div>
<lable>计数器：{this.state.count}</lable>
<input type="button" value="增加" onClick={this.hanleCount}/>
</div>
</div>
}
2.初始化(在构造函数中)
constructor(){
super(); //一般构造方法都是先调用父类的构造函数，不然this不能用，super的意思是调用父类的构造函数
this.state = {
count:0
}
}
3.函数修改
//函数（要使用箭头函数，不然this无法获取）
hanleCount = ()=>{
this.setState({
count:this.state.count + 1
});
console.log(this.state.count);
}
2.state来获取文本框的值
onInput()
1.给文本框和点击事件绑定
<div>
{/*当给文本框一个初始值value之后，（受空组件），点击文本框输入值不能输入了*/}
<input type="text" ref={this.input} value={this.state.value} onInput={this.handleValue}/>
<input type="button" value="增获取加" onClick={this.hanleInput}/>
</div>
2.初始化文本框的值
constructor(){
super(); //一般构造方法都是先调用父类的构造函数，不然this不能用，super的意思是调用父类的构造函数
this.input = React.createRef();
this.state = {
count:0,
value:""
}
}
3.改变文本框的值或获取文本框的值
//获取文本框里面的值
hanleInput = ()=>{
//获取的值还是state里面的值
console.log(this.state.value);
}
//设置文本框的值
handleValue = (e)=>{
this.setState({
value:e.target.value
})
}
3.state获取单选框的值
onChange
1.绑定
<lable>性别：</lable>
<input type="radio" value="male" name="gender" checked={this.state.gender=="male" ? true :false} onChange={this.hanleGender}/>
<lable>男</lable>
<input type="radio" value="female" name="gender" checked={this.state.gender=="female" ? true :false} onChange={this.hanleGender}/>
<lable>女</lable>
2.初始化
this.state = {
count:0,
value:"",
gender:"female"
}
3.修改，赋值
//获取性别
hanleGender = (e)=>{
this.setState({
gender:e.target.value
})
// console.log("e23456",this.state.gender);
}
4.获取值
hanleInput = ()=>{
console.log(this.state.value,this.state.gender);
}
终：代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器</title>
</head>
<body>
<div id="root">
<!-- <input type="password" placeholder=""> -->
</div>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
class Addcount extends React.Component{
//构造函数
constructor(){
super(); //一般构造方法都是先调用父类的构造函数，不然this不能用，super的意思是调用父类的构造函数
this.input = React.createRef();
this.state = {
count:0,
value:"",
gender:"female"
}
}
//函数（要使用箭头函数，不然this无法获取）
hanleCount = ()=>{
this.setState({
count:this.state.count + 1
});
// console.log(this.state.count);
}
//获取文本框里面的值
hanleInput = ()=>{
console.log(this.state.value,this.state.gender);
// console.log(this.input.current.value);
}
//设置文本框的值
handleValue = (e)=>{
this.setState({
value:e.target.value,
})
// console.log(e.target.value,this.state.gender);
}
//获取性别
hanleGender = (e)=>{
this.setState({
gender:e.target.value
})
// console.log("e23456",this.state.gender);
}
render(){
return <div>
<div>
{/*当给文本框一个初始值value之后，（受空组件），点击文本框输入值不能输入了*/}
<input type="text" ref={this.input} value={this.state.value} onInput={this.handleValue}/>
<input type="button" value="增获取加" onClick={this.hanleInput}/>
</div>
<div>
<lable>计数器：{this.state.count}</lable>
<input type="button" value="增加" onClick={this.hanleCount}/>
</div>
<div>
<lable>性别：</lable>
<input type="radio" value="male" name="gender" checked={this.state.gender=="male" ? true :false} onChange={this.hanleGender}/>
<lable>男</lable>
<input type="radio" value="female" name="gender" checked={this.state.gender=="female" ? true :false} onChange={this.hanleGender}/>
<lable>女</lable>
</div>
</div>
}
}
ReactDOM.render(<Addcount />,document.getElementById("root"))
</script>
</body>
</html>
扫一扫
1186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
