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><label>写死value-锁定状态</label><input type="text" value="hello react"/></p>
                <p><label>动态value-锁定状态</label><input type="text" value={this.state.text}/></p>
                <p><label>不指定value-没锁状态</label><input type="text"/></p>
            </p>
        )
    }
}
ReactDOM.render(<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><label>写死value-锁定状态</label><input type="text" value="hello react" onChange={this.change}/></p>
                <p><label>动态value-没锁状态</label><input type="text" value={this.state.text} onChange={this.change}/></p>
                <p><label>不指定value-没锁状态</label><input type="text"/></p>
            </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 value={this.state.text} onChange={this.change}/>
            </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 value="grapefruit">Grapefruit</option>
    <option value="lime">Lime</option>
    <option selected value="coconut">Coconut</option>
    <option value="mango">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 value={this.state.text} onChange={this.change}>
                    <option value="grapefruit">Grapefruit</option>
                    <option value="lime">Lime</option>
                    <option value="coconut">Coconut</option>
                    <option value="mango">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 type=&#39;file&#39; ref={input => {this.file = input}}/>
                <input type="button" value="submit" onClick={this.submit} />
            </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!