Wie man Formular-Daten aus input-Feldern in Reagieren

Konstruktor-Funktion:

constructor(props) {
    super(props);

    this.state = {
        tagline: 'We rank what people are talking about.',
        year: new Date().getFullYear()
    };

    this.onFormSubmit = this.onFormSubmit.bind(this);
}

onFormSubmit(e) {
    console.log('onFormSubmit', e)
    console.log('this.state', this.state);
};

Form (Klassennamen zur Klarheit weggelassen):

<form onSubmit={ this.onFormSubmit }>
    <div className="fl w100">
        <div>
            <input type="text" id="email" value={ this.state.email }/>
            <label htmlFor="email">Email</label>
        </div>
    </div>

    <div className="fl w100">
        <div>
            <input type="password" id="password" value={ this.state.password }/>
            <label htmlFor="password">Password</label>
        </div>
    </div>

    <button type="submit">
        Login
    </button>
</form>

Dies ist, was sich ausloggt, Hinweis: keine E-Mail-oder Passwort-Informationen: Wie man Formular-Daten aus input-Feldern in Reagieren

Kompletten Login-Komponente code

import React from 'react';

class Login extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            tagline: 'We rank what people are talking about.',
            year: new Date().getFullYear()
        };

        this.onFormSubmit = this.onFormSubmit.bind(this);
    }

    onFormSubmit(e) {
        console.log('onFormSubmit', e)
        console.log('this.state', this.state);
    };

    render() {
        return (<div className="app">
            <div className="welcome">
                <header>
                    <div className="wikitags-logo">
                        <img src="imgs/wikitags-logo.png"/>
                    </div>
                    <h2>Admin Portal</h2>
                    <p>{ this.state.tagline }</p>
                </header>

                <section className="login-form">
                    <form onSubmit={ this.onFormSubmit }>
                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="text" id="email" value={ this.state.email }/>
                                <label className="mdl-textfield__label" htmlFor="email">Email</label>
                            </div>
                        </div>

                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="password" id="password" value={ this.state.password }/>
                                <label className="mdl-textfield__label" htmlFor="password">Password</label>
                            </div>
                        </div>

                        <button type="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                            Login
                        </button>
                    </form>
                </section>

                <footer>
                    &copy; { this.state.year } WikiTags
                </footer>
            </div>
        </div>);
    }
}

export default Login;

InformationsquelleAutor Leon Gaban | 2017-04-29

4

Vorschläge:

1. Sie sind mithilfe der value-Eigenschaft mit input-Feldern, aber Sie hat nicht definiert, die onChange-Methode, so dass die Eingabefelder werden nur-lese -, weil state-Wert wird nicht aktualisiert.

2. Definieren Sie ein onChange-Ereignis werden alle input-Felder oder machen Sie unkontrollierte element durch entfernen der value-Eigenschaft.

3. Im Falle der unkontrollierten element definieren, die ref auf jedes Feld und rufen Sie den Wert verwenden this.ref_name.value.

Durch die Definition der onChange-Ereignis:

Definieren Sie die name-Eigenschaft für jedes input-element (name muss derselbe sein wie der state-variable-name es wird Ihnen helfen, aktualisieren Sie den Status, und wir können all die Veränderung in einzelnen onChange-Funktion) wie folgt:
```
<input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />

handleChange(e){
   this.setState({[e.target.name]: e.target.value})
}
```
Von Uncotrolled element:
```
<input type="text" ref={el => this.el = el} />
```
Nun im onSubmit-Funktion verwenden this.el.value zugreifen, er Werte dieses Eingabefeld.

Überprüfen Sie diese Antwort für Referenz: https://stackoverflow.com/a/43695213/5185595

Schön! Ich Liebe Ihre Lösung mithilfe des event-Objekts, die direkt auf den Status. Danke für die Erklärung 🙂

InformationsquelleAutor Mayank Shukla
5

Werden Sie nicht bekommen E-Mail-oder Passwort-Informationen, weil Sie vorbei sind in dem Zustand console.log('this.state', this.state); und Sie haben nicht einen Staat für die E-Mail und Passwort.

Nun, du hast zwei Optionen:
1. Den Status und erhalten die form info von dort
2. Übergeben Sie den input-Wert an eine Funktion, mit der info
Für option 1, müssen Sie einen Status für Ihre E-Mail und Passwort (obwohl das einstellen eines Staates für ein Passwort wird nicht empfohlen) und ein onChange event-handler auf den Eingang(s).

Richten Sie Ihre onChange event-Handler.
```
<form onSubmit={ this.onFormSubmit }>
  <input type="text" id="email" onChange={this.handleEmailChange} value={ this.state.email } />

  <input type="password" id="password" onChange={this.handlePasswordChange} value={ this.state.password } />

  <button type="submit">
    Login
  </button>
</form>
```
Und die Funktionen festlegen, die email und password Staaten.
```
handleEmailChange(event) {
  this.setState({ email: event.target.value });
}

handlePasswordChange(event) {
  this.setState({ password: event.target.value });
}
```
Und nicht vergessen, initialisieren Sie den Staat für Ihre email und password im Konstruktor, und binden Sie die Funktionen.
```
constructor(props) {
  super(props);

  this.state = {
    email: '',
    password: ''
  };

  this.handleEmailChange = this.handleEmailChange.bind(this);
  this.handlePasswordChange = this.handlePasswordChange.bind(this);
}
```
Fertig! Dann auf die onFormSubmit Funktion nur Zugriff auf die email und password Werte vom Staat this.state.email und this.state.password und tun, was Sie möchten.

Nun für option 2, Sie kann nur passieren in der event.target.value der Eingänge, das sind die Werte für die E-Mail und das Kennwort ein, und geben diese Werte an ein Formular-Ereignis-handler onSubmit Funktion, von dort aus können Sie tun was Sie wollen (der Staat oder aktualisieren Sie die E-Mail und Passwort, zu ändern, was auch immer).
```
<form onSubmit={ this.onFormSubmit }>
  <input type="text" id="email" name="theEmail" />

  <input type="password" id="password" name="thePassword" />

  <button type="submit">
    Login
  </button>
</form>
```
Und die onFormSubmit Funktion.
```
onFormSubmit(event) {
  const email = event.target.theEmail.value;
  const password = event.target.thePassword.value;

  //do stuff
  console.log('Email:', email);
  console.log('Password:', password);
};
```
Die einfachere und empfohlene Weg, das zu erreichen, was Sie zu tun versuchen, ist die option 2.

Denken Sie daran, die weniger Staat Ihre app verarbeitet, desto besser.

Vielen Dank für diese Antwort, auch! +1
Oh wow, tolle Erklärung zu 2. Speziell für dieses login-Formular.

InformationsquelleAutor bntzio

So, wie würde ich diesen Ansatz ist um die Werte zu speichern, die in Ihrem Staat über eine sogenannte controlled-Komponente. Herstellung eines controlled-Komponente ist sehr einfach, dies ist eine grundlegende Implementierung:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Der Schlüssel ist hier die handleChange Funktion, und die onChange Attribut. Jedes mal, wenn sich das Eingabefeld ändert, die handleChange - Funktion aufgerufen werden und der Zustand aktualisiert wird.

Finden Sie mehr Infos form der Dokumentation hier: https://facebook.github.io/react/docs/forms.html

InformationsquelleAutor Nitsew

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.