Detaillierte Erläuterung der Verwendung von Formularen in React

Dieses Mal werde ich Ihnen die Verwendung von Formularen in React ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Formularen in React? Hier sind praktische Fälle.

Formular

React ist ein unidirektionales Datenfluss-Framework, daher unterscheiden sich die Formularelemente von anderen DOM-Elementen und auch die Bedienung unterscheidet sich stark vom bidirektionalen Bindungs-Framework. Deshalb werde ich hier separat darüber sprechen.

Kontrollierte Eingabe

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

Dieser Fall zeigt, dass in React das Formularelement nach der Wertangabe aufgrund des unidirektionalen Datenflusses nicht erneut geändert werden kann und daher mit <a href="http://www.php.cn/wiki/1464.html" target="_blank">onChange<code><a href="http://www.php.cn/wiki/1464.html" target="_blank">onChange</a>-Ereignis muss abgeschlossen werden. Der obige Fall sollte also so aussehen:

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

Effektvorschau

textarea-Element

In gewöhnlichem HTML ist das textarea-Element der Knotentextwert

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

Aber in React muss dieses Element das Attribut value verwenden.

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

Element auswählen

Um in gewöhnlichem HTML den standardmäßig ausgewählten Wert für das Element select anzugeben, müssen Sie das Attribut optionselected

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

🎜>Aber in React müssen Sie nur das Attribut

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

valueEingabedateielement angeben

Da

ein spezielles Element ist, ist es schreibgeschützt, also in In React muss

für die spezielle Verarbeitung verwendet werden <input type="file">

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

ref Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Auswahl der Li-Hervorhebung in React

JSON- und Mathe-Anwendungsfallanalyse in JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Formularen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!