Detailed explanation of using forms in React

php中世界最好的语言

Release： 2018-05-24 14:22:56

Original

1314 people have browsed it

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'));

Copy after login

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="//m.sbmmt.com/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>
        )        
    }
}

Copy after login

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>

Copy after login

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>
        )        
    }
}

Copy after login

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>

Copy after login

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>
        )        
    }
}

Copy after login

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>
        )        
    }
}

Copy after login

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!