Detailed explanation of using forms in React

This time I will bring you a detailed explanation of the use of forms in React. What are the precautions when using forms in React? Here are practical cases, let’s take a look.

Form

React is a one-way data flow framework, so the form elements are different from other DOM elements, and the operation is also very different from the two-way binding framework. So I’ll talk about it separately here.

Controlled input

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'Hello React'
        }
    }
    render(){
        return (
            <p>
                </p><p><label>写死value-锁定状态</label><input></p>
                <p><label>动态value-锁定状态</label><input></p>
                <p><label>不指定value-没锁状态</label><input></p>
            
        )        
    }
}
ReactDOM.render(<component1></component1>, document.getElementById('p1'));

This case illustrates that in React, form elements cannot be modified again after the value is given due to one-way data flow, so cooperation is required<a href="http://www.php.cn/wiki/1464.html" target="_blank"> onChange</a> event to complete. So the above case should be like this

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'Hello React'
        }
    }
    change = (e) => {
        this.setState({text: e.target.value})
    }
    render(){
        return (
            <p>
                </p><p><label>写死value-锁定状态</label><input></p>
                <p><label>动态value-没锁状态</label><input></p>
                <p><label>不指定value-没锁状态</label><input></p>
            
        )        
    }
}

Effect preview

textarea element

In ordinary HTML, the textarea element is the node text value

<textarea>
  Hello there, this is some text in a text area
</textarea>

But in React, this element needs to use the value attribute.

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'Hello React'
        }
    }
    change = (e) => {
        this.setState({text: e.target.value})
    }
    render(){
        return (
            <p>
                <textarea></textarea>
            </p>
        )        
    }
}

select element

In ordinary HTML, if the select element wants to specify the default selected value, you must add attributes to the corresponding option selected

<select>
    <option>Grapefruit</option>
    <option>Lime</option>
    <option>Coconut</option>
    <option>Mango</option>
</select>

But in React, you only need to give the attribute value

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'lime'
        }
    }
    change = (e) => {
        this.setState({text: e.target.value})
    }
    render(){
        return (
            <p>
                <select>
                    <option>Grapefruit</option>
                    <option>Lime</option>
                    <option>Coconut</option>
                    <option>Mango</option>
                </select>                
            </p>
        )        
    }
}

input file element

because <input type="file"> is a special element, it is read-only, so you need to use ref for special processing in React

class Component1 extends React.Component{
    submit = (e) => {
        console.log(this.file.files)
    }
    render(){
        return (
            <p>
                <input> {this.file = input}}/>
                <input>
            </p>
        )        
    }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to select li highlighting in react

JSON and Math use case analysis in JS

The above is the detailed content of Detailed explanation of using forms in React. For more information, please follow other related articles on the PHP Chinese website!