14. React event processing
14.1 Event Binding
Syntax: on+event name={event handler}, for example:
onClick={
()=>{
}
}
Note: React events use camel case naming, such as: onMouseEnter, onFocus
Function components do not use this when binding events
14.2 Event objects
The event object can be obtained through the parameters of the event handler
The event object in react is called: synthetic event (object)
Compatible with all browsers, no need to worry about cross-browser compatibility issues
Here is a piece of code that prevents bubbling
class App extends React.Component {
handleClick(e) {
// 阻止浏览器的默认行为
e.preventDefault()
console.log('a标签的单击事件触发了')
}
render() {
return (
<a href="http://itcast.cn/" onClick={this.handleClick}>传智播客</a>
)
}
}15. Stateful and stateless components
Function components are also called stateless components, and class components are also called stateful components
state is data
Function components do not have their own state, only responsible for data display (static)
The class component has its own state, which is responsible for updating the ul and making the page move
16. State and setState in components
16.1 Basic use of state
State is data, which is private inside the component and can only be used within the component
The value of state is an object, indicating that there can be multiple data in a component
Create a data called count in this way in the component
state = {
count:10
}Then use {^instance^.state.count} below to get it
16.2setState modify state
state is mutable
Syntax: this.setState(
{data to modify}·
）
Note: Do not directly modify the value in the state, this is wrong!
Idea: Data Driven View
Similar to this, the value of count will increase by one every time the button is clicked,
The size of the latest count will be reacquired every time, so it can be added all the time
class App extends React.Component {
state = {
count:0
}
render(){
return(
<div>
<h1>计数器：{this.state.count}</h1>
<button onClick={() => {
this.setState({
count:this.state.count+1,
})
}}>+1</button>
</div>
)
}17. Extract event handlers from jsx
If there is too much js logic code mixed in jsx, it will appear very confusing
Recommendation: Extract the logic into a separate method to ensure a clear jsx structure
Reason: The value of this in the event handler is undefined
Hope: this points to the component instance (this in the render method is the component instance)
18. Change the method pointed to by this in event binding
1. Arrow functions
2.Function.prototype.bind()
3. Instance method of class
18.1 Arrow functions
<button onClick={this.onIncrement}>+1</button>
变成
<button onClick={（）=>this.onIncrement()}>+1</button>This in the arrow function points to the external environment, here it points to the render() method, that is, this points to the current instance
18.2 Use the bind method to solve the problem of this pointing
Add an es6 constructor method
constructor(){
super()
this.onIncrement = this.onIncrement.bind(this)
}In this way, because bind is used, this is the changed this when we go to onlncrement next.
18.3 Instance methods of classes
Class instance methods using arrow function form
This method is an experimental syntax, but it can be used directly due to the existence of babel
Change this directly on the side of the method processing function
onIncrement（） {
console.log('事件处理程序中的this',this);
this.setState({
count:this.state.count + 1
})
}
变成
onIncrement = ()=>{
console.log('事件处理程序中的this',this);
this.setState({
count:this.state.count + 1
})
}These three most recommended classes
19. Controlled vs. Uncontrolled Components
19.1 Controlled components
Form elements in html are inputtable, that is, have their own mutable state. However, the mutable state in react is stored in the state and can only be modified by the setState method. React binds the state to the value of the form element, and the value of the form element is controlled by the value of the state
Controlled components: form elements whose values are controlled by React
direct
<input type="text" value={this.state.txt} />Let the value be directly equal to the value of state
The word state here looks like this
state = {
txt:""
}Then add an onChange event to listen for changes
<input type="text" value={this.state.txt} onChange={this.handleChange}/>That'll be fine
I may have to start reading documents here, and this column notes will be slower