1. Register for an event
- React registering events is very similar to the DOM's event syntax
- Syntax on+event name={event handler} e.g. onClick={this.handleClick}
- Note: React events use camel case, such as onMouseEnter, onClick
class App extends React.Component { render() { return ( <div> <button onClick={this.handleClick}>I point</button> </div> ) } handleClick() { console.log('click event fired') } }
2. Event object
-
The event object can be obtained through the parameters of the event handler
-
Event objects in React are called: synthetic events (objects)
-
Synthetic Events: Compatible with all browsers, no need to worry about cross-browser compatibility
function handleClick(e) { e.preventDefault() console.log('event object', e) } <a onClick={this.handleClick}>Click me, will not jump to the page</a>
3.this points to the problem
- this in the event handler points to undefined
- this in the render method points to the current react component. Only this in the event handler is problematic
Analyze the reasons:
- Inside the class, the local strict mode use strict is turned on, so this will not point to window undefined
- In onClick={this.fn}, the call of this.fn is not called through the instance of the class, so the value is undefined
- The render function is called by the component instance, so this in the render function points to the current component
class App extends React.Component { state = { msg: 'hello react' } handleClick() { console.log(this.state.msg) } render() { return ( <div> <button onClick={this.handleClick}>I point</button> </div> ) } }
4.this points to the problem solution
- Scenario 1: Arrow Functions
- Option 2: bind modifies this to point to
- Scenario 3: Class Instance Methods
method one:
class App extends React.Component { state = { msg: 'hello react' } render() { return ( <div> <button onClick={() => { console.log(this.state.msg) }>I point</button> </div> ) } }
Method two:
class App extends React.Component { state = { msg: 'hello react' } handleClick() { console.log(this.state.msg) } render() { return ( <div> <button onClick={this.handleClick.bind(this)}>I point</button> </div> ) } }
Method 3: [recommended]
class App extends React.Component { state = { msg: 'hello react' } handleClick = () => { console.log(this.state.msg) } render() { return ( <div> <button onClick={this.handleClick}>I point</button> </div> ) } }
Note: this syntax is experimental, but has babel escapes so there is no problem
The third way is the most developed and used.
5.setState modifies the state
-
The state in the component is mutable
-
Syntax this.setState({data to be modified})
-
Note: Do not modify the value in state directly, it must be modified through the this.setState() method
-
The role of setState
-
modify state
-
Update UI
-
-
Idea: Data-Driven Views
class App extends React.Component { state = { count: 1 } handleClick=()=>{ this.setState({ count: this.state.count + 1 }) } render() { return ( <div> <p>frequency: {this.state.count}</p> <button onClick={this.handleClick}>I point+1</button> </div> ) } }
6. Controlled component usage
-
Add a state to the state as the value of the form element (control the value of the form element)
-
Add a change event to the form element, set the value of state to the value of the form element (control the change of the value)
Common controlled components:
-
Text box, text field, drop-down box (operation value attribute)
-
Checkbox (manipulate checked property)
class App extends React.Component { state = { msg: 'hello react' } handleChange = (e) => { this.setState({ msg: e.target.value }) } render() { return ( <div> <input type="text" value={this.state.msg} onChange={this.handleChange}/> </div> ) } }
7. Uncontrolled components - ref (deprecated)
Uncontrolled components use the native DOM method to get the value of the form element with the help of ref
- Create a ref by calling the React.createRef() method
constructor() { super() this.txtRef = React.createRef() } txtRef = React.createRef()
- Add the created ref object to the text box
<input type="text" ref={this.txtRef}/>
- Get the value of the text box through the ref object
handleClick = () => { console.log(this.txtRef.current.value) }
Uncontrolled components are not used much, it is recommended to use controlled components