Introduction à l'utilisation des éléments de formulaire React (avec code)

Cet article vous apporte une introduction à l'utilisation des éléments du formulaire React (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.

Aujourd'hui, nous allons parler des éléments de formulaire de réaction.

Élément contrôlé

Voyons comment obtenir la valeur de la zone de saisie

import React, { Component } from 'react';

class Trem extends React.Component {
    constructor(props){
        super(props);
        this.inp = this.inp.bind(this);
        this.sub = this.sub.bind(this);
        this.state = {
            place:"请输入...",
            inputV:''
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value     {/* 通过事件细节改变inputV的值*/}
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            dc6dce4a544fdca2df29d5ac0ea9906b
                62e199ef0ab75a2a7be23da5fa1c717d
                076402276aae5dbec7f672f8f4e5cc81
                459c89d2db27bf5521f6ebf243005869{this.props.main}65281c5ac262bf6d81768915a4a77ac0{/*此处的main是来自父组件的传值*/}
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}
export default Trem;

Interprétation du code :
ce .inp = this.inp.bind(this); Lier la fonction inp this pour qu'elle pointe vers
this.state Initialiser la variable
inp() Surveiller la valeur d'entrée de l'entrée
this.state.inputV Obtenez la valeur de l'entrée via l'affectation

balise textarea

import React, { Component } from 'react';

class Trem extends React.Component {
    constructor(props){
        super(props);
        this.inp = this.inp.bind(this);
        this.sub = this.sub.bind(this);
        this.state = {
            place:"请输入...",
            inputV:''
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value    
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            dc6dce4a544fdca2df29d5ac0ea9906b
                579a56a427fedd3f43e55073182d8083                
                076402276aae5dbec7f672f8f4e5cc81
                459c89d2db27bf5521f6ebf243005869{this.props.main}65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Trem;

Boîte de sélection déroulante

import React, { Component } from 'react';

class Trem extends React.Component {
    constructor(props){
        super(props);
        this.select = this.select.bind(this);
        this.state = {
            selectV:'coconut'
        }
    };    
    select(e){
        this.setState({
            selectV:e.target.value    
        });
        console.log(e.target.value)
    };        
    render(){
        return (
            dc6dce4a544fdca2df29d5ac0ea9906b                
                3b8a70dc2667e2f464d10ebbd01d4c15
                    5cd170ccbf19f643965dc1b11b38534fGrapefruit4afa15d3069109ac30911f04c56f3338
                    67b1a94f022b03f32c16ff26047dc8f5Lime4afa15d3069109ac30911f04c56f3338
                    6c713fef7b2c7826473712e34196e8b6Coconut4afa15d3069109ac30911f04c56f3338
                    7d46921a401f79981639c6e9dc841feaMango4afa15d3069109ac30911f04c56f3338
                18bb6ffaf0152bbe49cd8a3620346341
                076402276aae5dbec7f672f8f4e5cc81
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Trem;

Interprétation du code :
Veuillez noter que l'option Noix de coco est initialement sélectionnée en raison de l'attribut sélectionné. Dans React, l'attribut sélectionné précédent n'est pas utilisé, mais l'attribut value est utilisé sur la balise de sélection racine pour représenter l'élément sélectionné. Ceci est plus pratique dans les composants contrôlés, car il vous suffit de mettre à jour le composant à un seul endroit.

En bref, 23efcc05e98690ceeb219581933e4231, 4750256ae76b6b9d804861d8f69e79d3 et 221f08282418e2996498697df914ce4e attribut de valeur Contrôle des composants.

Solutions d'entrée multiples
Lorsque vous avez plusieurs éléments d'entrée contrôlés, vous pouvez ajouter un nom à chaque attribut d'élément pour laisser le gestionnaire choisir quoi faire en fonction sur la valeur de event.target.name.

import React,{Component} from 'react';

class More extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isGoing: true,
            numberOfGuests: 2
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    };
    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({
            [name]: value
        });
        console.log(event.target.checked,event.target.value)
    };
    render(){
        return (
            ff9c23ada1bcecdd1a0fb5d5a0f18437
                2e1cf0710519d5598b1f0f14c36ba674
                Is going:
                bb9a5cf863b3be50dad45a483335a732
                8c1ecd4bb896b2264e0711597d40766c
                ff9d32c555bb1d9133a29eb4371c1213
                2e1cf0710519d5598b1f0f14c36ba674
                Number of guests:
                0cc06ec0576f2b965bb67af4c374cf2f
                8c1ecd4bb896b2264e0711597d40766c
            f5a47148e367a6035fd7a2faa965022e
        )
    }
}
export default More;

Interprétation du code :

this.setState({
});

Syntaxe du nom d'attribut calculé es6

Adresse du code source : https://github.com/Nick091608.. .

[Recommandations associées : tutoriel vidéo React]

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!