Einführung in die Verwendung von React-Formularelementen (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von React-Formularelementen (mit Code). Freunde in Not können darauf verweisen. helfen.

Heute werden wir über Reaktionsformelemente sprechen.

Gesteuertes Element

Sehen wir uns an, wie man den Wert des Eingabefelds erhält

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;

Codeinterpretation:
this.inp = this. inp.bind(this); Binden Sie die inp-Funktion this so, dass sie auf
this.state zeigt. Initialisieren Sie die Variable
inp(). Überwachen Sie den Eingabewert der Eingabe
this.state.inputV Wert der Eingabe durch Zuweisung

textarea tag

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;

Dropdown-Auswahlfeld

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;

Codeinterpretation:
Bitte beachten Sie, dass aufgrund des ausgewählten Attributs zunächst die Option Kokosnuss ausgewählt ist. In React wird das zuvor ausgewählte Attribut nicht verwendet, aber das Wertattribut wird im Root-Select-Tag verwendet, um das ausgewählte Element darzustellen. Dies ist bei kontrollierten Komponenten praktischer, da Sie die Komponente nur an einer Stelle aktualisieren müssen.

Kurz gesagt, 23efcc05e98690ceeb219581933e4231, 4750256ae76b6b9d804861d8f69e79d3 und 221f08282418e2996498697df914ce4e sind alle sehr ähnlich – sie implementieren alle die Interaktion, indem sie a übergeben Wertattribut Steuerung von Komponenten.

Mehrere Eingabelösungen
Wenn Sie über mehrere kontrollierte Eingabeelemente verfügen, können Sie jedem Element einen Namen hinzufügen. Attribut, damit der Handler auswählen kann, was basierend auf dem Attribut zu tun ist auf den Wert von 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;

Codeinterpretation:

this.setState({
});

es6 berechnete Attributnamenssyntax

Quellcodeadresse: https://github.com/Nick091608...

【Verwandte Empfehlungen: Video-Tutorial reagieren】

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von React-Formularelementen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!