Explication détaillée de l'utilisation des formulaires dans React

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des formulaires dans React. Quelles sont les précautions lors de l'utilisation des formulaires dans React. Voici des cas pratiques, jetons un coup d'œil.

Form

React est un framework de flux de données unidirectionnel, donc les éléments du formulaire sont différents des autres éléments DOM, et le fonctionnement est également très différent du framework de liaison bidirectionnelle. Je vais donc en parler séparément ici.

Saisie contrôlée

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

Ce cas illustre que dans React, les éléments de formulaire ne peuvent pas être modifiés à nouveau une fois la valeur donnée en raison d'un flux de données unidirectionnel, vous devez donc coopérer avec onChange<a href="http://www.php.cn/wiki/1464.html" target="_blank">onChange</a> à terminer. Le cas ci-dessus devrait donc ressembler à ceci

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

Aperçu de l'effet

élément textarea

En HTML ordinaire, l'élément textarea est la valeur du texte du nœud

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

Mais dans React, cet élément doit utiliser l'attribut value.

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

En HTML ordinaire, si l'élément select veut spécifier la valeur sélectionnée par défaut, vous devez ajouter l'attribut optionselected au

<select>
    <option value="grapefruit">Grapefruit</option>
    <option value="lime">Lime</option>
    <option selected value="coconut">Coconut</option>
    <option value="mango">Mango</option>
</select>

Mais dans React, il vous suffit de donner l'attribut

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

élément du fichier d'entrée

Parce que

est un élément spécial, il est en lecture seule, vous devez donc utiliser <input type="file"> pour un traitement spécial dans React ref

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Explication détaillée des étapes pour sélectionner la mise en évidence de li dans React

Analyse des cas d'utilisation JSON et Math en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!