React state
All components produce state object
props: You can only get the value inside , Do not modify , It doesn't work if it's modified
state: Get and change values
One : Component status update
1. Use ref Access to the node , And get the content of the node
establish ref object
this.xxx = React.createRef();
obtain ref node
this.xxx.current
example :
class Addcount extends React.Component{
// Constructors
constructor(){
super();
this.input = React.createRef();
}
// Get the value in the text box
hanleInput = ()=>{
console.log(this.input.current.value);
}
render(){
return <div>
<div>
{
/* When giving a text box an initial value value after ,( Empty component ), Click the text box to enter the value. You can't enter */}
<input type="text" ref={
this.input} value={
this.state.value} onInput={
this.handleValue}/>
<input type="button" value=" Gain gain gain " onClick={
this.hanleInput}/>
</div>
</div>
}
}
ReactDOM.render(<Addcount />,document.getElementById("root"))
2. Use state object
initialization state
constructor(){ super(); // The general construction method is to call the constructor of the parent class first , Otherwise this Out-of-service ,super It means to call the constructor of the parent class this.state = { count:0, value:"", gender:"female" } }
obtain state
<p>{ this.state.count}</p>
Set up state
this.setState({ count:this.state.count + 1 })
Two :props and state contrast
The same thing : Both are objects provided inside the component
props:
- Used to transfer data between components
- Pass through content between custom attributes or labels
- One way delivery
- You can set it manually , But if you set it manually, the component status will not be updated , But if the value is changed through the parent component , The component status will be updated
state:
- Each component can be initialized state object
- state Itself cannot pass , Delivery can only be used props, But values can be passed
- Can set value , The component status of the object is updated
- The setting method must be setState, Instead of using it directly this.state
3、 ... and : Event handling
stay HTML The component handles the corresponding event by binding the event handling method
The bound attribute name must be preceded by
on
, And use the hump nomenclatureNot HTMl Component cannot handle events , But it can go through
props
Pass onCan be a string , function , object
In the event this
ES6 In the class , Of event handling methods this by undefined
resolvent
Bind the current object to the in the method in the constructor this
this.hanleCount= this.handleCount.bind(this)
It seems that the arrow function is used to define the method
handleCount=(e)=>{ ...}
Use... When binding events bind Method
onClick={ this.handleCount.bind(this)}
Use the arrow function when binding events
onClick={ e=>this.handleCount(e)}
Four : Controlled and uncontrolled components
The text box is set to value attribute
Single or multiple choices set checked attribute
How to make controlled components changeable
Use state Set the value
binding onChange event
Get the value of the component in the event handling method and change state
<input type="text" value={ this.state.value} onChange={ (e)=>{ this.setState({ value:e.target.value})}} >
5、 ... and :state
1. Must be initialized between uses ( In the constructor )
2. binding event
3. obtain this.state
4. modify , Must be in setState The changes in it this.setState({count:this.state.count+1})
setState
It's an asynchronous method , Because this operation is more than just changing the value , There's going to be DOM operation
Operation steps
ref So I gave him a sign , Then you can get it through this logo , But you can't modify it , It is not recommended to use
1.state To increase the value
onClick
1. binding
render(){
return <div>
<lable> Counter :{
this.state.count}</lable>
<input type="button" value=" increase " onClick={
this.hanleCount}/>
</div>
</div>
}
2. initialization ( In the constructor )
constructor(){
super(); // The general construction method is to call the constructor of the parent class first , Otherwise this Out-of-service ,super It means to call the constructor of the parent class
this.state = {
count:0
}
}
3. Function modification
// function ( To use the arrow function , Otherwise this Can't get )
hanleCount = ()=>{
this.setState({
count:this.state.count + 1
});
console.log(this.state.count);
}
2.state To get the value of the text box
onInput()
1. Bind the text box and click event
<div>
{/* When giving a text box an initial value value after ,( Empty component ), Click the text box to enter the value. You can't enter */}
<input type="text" ref={this.input} value={this.state.value} onInput={this.handleValue}/>
<input type="button" value=" Gain gain gain " onClick={this.hanleInput}/>
</div>
2. Initialize the value of the text box
constructor(){
super(); // The general construction method is to call the constructor of the parent class first , Otherwise this Out-of-service ,super It means to call the constructor of the parent class
this.input = React.createRef();
this.state = {
count:0,
value:""
}
}
3. Change the value of the text box or get the value of the text box
// Get the value in the text box
hanleInput = ()=>{
// The value obtained is still state The value of the inside
console.log(this.state.value);
}
// Set the value of the text box
handleValue = (e)=>{
this.setState({
value:e.target.value
})
}
3.state Get the value of the radio box
onChange
1. binding
<lable> Gender :</lable>
<input type="radio" value="male" name="gender" checked={
this.state.gender=="male" ? true :false} onChange={
this.hanleGender}/>
<lable> male </lable>
<input type="radio" value="female" name="gender" checked={
this.state.gender=="female" ? true :false} onChange={
this.hanleGender}/>
<lable> Woman </lable>
2. initialization
this.state = {
count:0,
value:"",
gender:"female"
}
3. modify , assignment
// Getting gender
hanleGender = (e)=>{
this.setState({
gender:e.target.value
})
// console.log("e23456",this.state.gender);
}
4. Get value
hanleInput = ()=>{
console.log(this.state.value,this.state.gender);
}
end : Code example
<!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> Counter </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{
// Constructors
constructor(){
super(); // The general construction method is to call the constructor of the parent class first , Otherwise this Out-of-service ,super It means to call the constructor of the parent class
this.input = React.createRef();
this.state = {
count:0,
value:"",
gender:"female"
}
}
// function ( To use the arrow function , Otherwise this Can't get )
hanleCount = ()=>{
this.setState({
count:this.state.count + 1
});
// console.log(this.state.count);
}
// Get the value in the text box
hanleInput = ()=>{
console.log(this.state.value,this.state.gender);
// console.log(this.input.current.value);
}
// Set the value of the text box
handleValue = (e)=>{
this.setState({
value:e.target.value,
})
// console.log(e.target.value,this.state.gender);
}
// Getting gender
hanleGender = (e)=>{
this.setState({
gender:e.target.value
})
// console.log("e23456",this.state.gender);
}
render(){
return <div>
<div>
{
/* When giving a text box an initial value value after ,( Empty component ), Click the text box to enter the value. You can't enter */}
<input type="text" ref={
this.input} value={
this.state.value} onInput={
this.handleValue}/>
<input type="button" value=" Gain gain gain " onClick={
this.hanleInput}/>
</div>
<div>
<lable> Counter :{
this.state.count}</lable>
<input type="button" value=" increase " onClick={
this.hanleCount}/>
</div>
<div>
<lable> Gender :</lable>
<input type="radio" value="male" name="gender" checked={
this.state.gender=="male" ? true :false} onChange={
this.hanleGender}/>
<lable> male </lable>
<input type="radio" value="female" name="gender" checked={
this.state.gender=="female" ? true :false} onChange={
this.hanleGender}/>
<lable> Woman </lable>
</div>
</div>
}
}
ReactDOM.render(<Addcount />,document.getElementById("root"))
</script>
</body>
</html>
版权声明
本文为[Fish that want to be taken away]所创,转载请带上原文链接,感谢
https://cdmana.com/2022/134/202205141344069049.html