React

Stateful components and stateless components

Data is state, and changes in data are changes in state (setState()).

Components that have mechanisms to maintain their own state stores and changes are called stateful components, and those that do not are called stateless components or UI components

The need to dynamically display the current time, for example, fits the definition of a stateful component

In React, class components are stateful and function components are stateless

Component state and setState

1. Basic use of state

State is a container for data that is used to store data inside the component (private), which is defined as being used only inside the component

State is initialized in the constructor of the class component, and the value is an object, indicating that there can be more than one piece of data in a component

Use of state, {this.state.time}

The code is as follows (example) :

Constructor () {constructor() {super() // This. State = {time: "}} to render () {return (< div > the current time is: {this. State. The time} < / div >)}}Copy the code

Get state data by initializing this. State in the constructor

2. SetState () Indicates the modification status

This.setstate ({data to modify})

SetState () is used to: 1. Modify state 2. Update UI Note: Do not directly modify the value of state, this is wrong!!

3. Bind this to the event

1. Arrow function

SetState () is a component instance of the render() method, using the fact that the arrow function itself does not bind this.

The code is as follows (example) :

Class Timer extends React.Component {handleClick() {this.setState({... <button onClick={() => this.handleclick ()}></button>)}}Copy the code

2. Function.prototype.bind()

Bind this in the event handler to the component instance using the BIND method in ES5

The code is as follows (example) :

class Timer extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) } / /... HandleClick render() {return (<button onClick={this.handleclick}></button>)}Copy the code

3. Class public field method (recommended)

Note that this syntax is experimental, but can be used directly because of Babel

Class Timer extends React.Component {handleClick = () => {this.setState({... }) } render() { return ( <button onClick={this.handleClick}></button> ) } }Copy the code

Fourth, form processing

1. Controlled components

In HTML, form elements are inputable, meaning they have their own mutable state. In React, mutable state is usually stored in state and can only be changed with the setState() method

React binds state to the value property of a form element. The value of state controls the value of a form element

Step: Add a state to state, bind the onChange event to the form element as the value attribute value (controlling the source of the form element value), and change the value of state by calling setState() (controlling the change of the form element value).

State ={TXT: ' '} <input type="text" value={this.state.txt} onChange={e => this.setState({TXT: e.target.value})} />Copy the code

Multi-form element optimization steps:

  • Add a name attribute to the form element with the same name as state
  • Gets the corresponding value based on the form element type
  • The corresponding state is modified by [name] in the change event handler
<input
  type="text"
  name="txt"
  value={this.state.txt}
  onChange={this.handleForm}
/>

Copy the code
Const value = target.type === 'checkbox'? State this.setState({[name]: value})Copy the code

2. Uncontrolled Components (DOM mode)

  • React is not controlled by the state property
  • With ref, use native DOM to get form element values
  • The ref property gets the DOM object or React component

To create a Refs object, call the react.createref () method

constructor() {
  super()
  this.txtRef = React.createRef()
}

Copy the code

Associate the created Refs object with the form element

<input type="text" ref={this.txtRef} />

Copy the code

Gets the value of the text box from the.current property of the Refs object

console.log(this.txtRef.current.value)
Copy the code