it-swarm.com.de

Formulardaten in Reactjs abrufen

Ich habe ein einfaches Formular in meiner render-Funktion:

render : function() {
      return (
        <form>
          <input type="text" name="email" placeholder="Email" />
          <input type="password" name="password" placeholder="Password" />
          <button type="button" onClick={this.handleLogin}>Login</button>
        </form>
      );
    },
handleLogin: function() {
   //How to access email and password here ?
}

Was muss ich in meine handleLogin: function() { ... } schreiben, um auf Email und Password zuzugreifen?

127
myusuf

Verwenden Sie die change-Ereignisse an den Eingängen, um den Status der Komponente zu aktualisieren und in handleLogin darauf zuzugreifen:

handleEmailChange: function(e) {
   this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
   this.setState({password: e.target.value});
},
render : function() {
      return (
        <form>
          <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} />
          <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange}/>
          <button type="button" onClick={this.handleLogin}>Login</button>
        </form>);
},
handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
}

Geige arbeiten: http://jsfiddle.net/kTu3a/

Lesen Sie auch die Dokumente. Es gibt einen ganzen Abschnitt zum Umgang mit Formularen: http://facebook.github.io/react/docs/forms.html

Bisher konnten Sie auch das bidirektionale Datenbinding-Helper-Mixin von React verwenden, um dasselbe zu erreichen. Jetzt ist es jedoch nicht mehr empfehlenswert, den Wert festzulegen und den Handler zu ändern (wie oben):

var ExampleForm = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {email: '', password: ''};
  },
  handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
  },
  render: function() {
    return (
      <form>
        <input type="text" valueLink={this.linkState('email')} />
        <input type="password" valueLink={this.linkState('password')} />
        <button type="button" onClick={this.handleLogin}>Login</button>
      </form>
    );
  }
});

Die Dokumentation ist hier: http://facebook.github.io/react/docs/two-way-binding-helpers.html

123
jbaiter

Dafür gibt es mehrere Möglichkeiten:

1) Werte aus einem Array von Formularelementen nach Index abrufen

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target[0].value)
}

2) Verwendung von name -Attribut in html

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target.elements.username.value) // from elements property
  console.log(event.target.username.value)          // or directly
}

<input type="text" name="username"/>

3) Refs verwenden

handleSubmit = (event) => {
  console.log(this.inputNode.value)
}

<input type="text" name="username" ref={node => (this.inputNode = node)}/>

Vollständiges Beispiel

class NameForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault()
    console.log(event.target[0].value)
    console.log(event.target.elements.username.value)
    console.log(event.target.username.value)
    console.log(this.inputNode.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="username"
            ref={node => (this.inputNode = node)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}
64

Ein alternativer Ansatz besteht darin, das ref-Attribut zu verwenden und die Werte mit this.refs zu referenzieren. Hier ist ein einfaches Beispiel:

render: function() {
    return (<form onSubmit={this.submitForm}>
        <input ref="theInput" />
    </form>);
},
submitForm: function(e) {
    e.preventDefault();
    alert(React.findDOMNode(this.refs.theInput).value);
}

Weitere Informationen finden Sie in den React-Dokumenten: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

Aus vielen Gründen, die in beschrieben werden. Wie verwende ich Optionsschaltflächen in React? Dieser Ansatz ist nicht immer der beste, aber in einfachen Fällen ist er eine nützliche Alternative.

41
Jamund Ferguson

Ein einfacher Weg, um mit Refs umzugehen: 

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    console.log('-->', formData);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input ref="phone" className="phone" type='tel' name="phone"/>
            <input ref="email" className="email" type='tel' name="email"/>
            <input type="submit" value="Submit"/>
          </form>
        </div>
    );
  }
}

export default UserInfo;

16
E. Fortes

Ich würde folgenden Ansatz vorschlagen:

import {Autobind} from 'es-decorators';

export class Form extends Component {

    @Autobind
    handleChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }

    @Autobind
    add(e) {
        e.preventDefault();
        this.collection.add(this.state);
        this.refs.form.reset();
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (
            <form onSubmit={this.add} ref="form">
                <input type="text" name="desination" onChange={this.handleChange}/>
                <input type="date" name="startDate" onChange={this.handleChange}/>
                <input type="date" name="endDate" onChange={this.handleChange}/>
                <textarea name="description" onChange={this.handleChange}/>
                <button type="submit">Add</button>
            </form>
        )
    }

}
9
James Akwuh

Sie können den onClick-Ereignishandler auf der Schaltfläche in einen onSubmit -Handler im Formular umschalten:

render : function() {
      return (
        <form onSubmit={this.handleLogin}>
          <input type="text" name="email" placeholder="Email" />
          <input type="password" name="password" placeholder="Password" />
          <button type="submit">Login</button>
        </form>
      );
    },

Dann können Sie FormData verwenden, um das Formular zu analysieren (und ein JSON-Objekt aus seinen Einträgen zu erstellen, wenn Sie möchten).

handleLogin: function(e) {
   const formData = new FormData(e.target)
   const user = {}

   e.preventDefault()

   for (let entry of formData.entries()) {
       user[entry[0]] = entry[1]
   }

   // Do what you will with the user object here
}
8
Michael

Wenn alle Ihre Eingaben/Textbereiche einen Namen haben, können Sie alle aus event.target filtern:

onSubmit(event){
  const fields = Array.prototype.slice.call(event.target)
      .filter(el => el.name)
      .reduce((form, el) => ({
        ...form,
        [el.name]: el.value,
      }), {})
}

Völlig unkontrollierte Form ???? ohne onChange-Methoden, value, defaultValue ...

6
Aral Roca

Geben Sie Ihre Eingaben wie folgt an

<input type="text" name="email" placeholder="Email" ref="email" />
<input type="password" name="password" placeholder="Password" ref="password" />

dann kannst du wie in soo auf dein handleLogin zugreifen

handleLogin: function(e) {
   e.preventDefault();
    console.log(this.refs.email.value)
    console.log(this.refs.password.value)
}
4
Imran Rafique

Wenn Sie Redux in Ihrem Projekt verwenden, können Sie die Verwendung dieser Komponente höherer Ordnung in Erwägung ziehen https://github.com/erikras/redux-form .

3
ivks
 onChange(event){
     console.log(event.target.value);
  }
  handleSubmit(event){ 
    event.preventDefault();
    const formData = {};
      for (const data in this.refs) {
        formData[data] = this.refs[data].value;
      }
    console.log(formData);
  }



 <form onSubmit={this.handleSubmit.bind(this)}>
  <input type="text" ref="username" onChange={this.onChange} className="form-control"/>
  <input type="text" ref="password" onChange={this.onChange} className="form-control"/>
  <button type="submit" className="btn-danger btn-sm">Search</button>
 </form>

Hier angehängtes Bild ausgeben

3
Milan Panigrahi

Bei vielen Ereignissen in Javascript gibt es event, die ein Objekt angeben, einschließlich des Ereignisses und der Werte usw.

Das ist, was wir mit Formularen auch in ReactJs verwenden ...

In Ihrem Code setzen Sie also den Status auf den neuen Wert ... ungefähr so:

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin(e) {
    e.preventDefault();
    for (const field in this.refs) {
      this.setState({this.refs[field]: this.refs[field].value});
    }
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleLogin}>
            <input ref="email" type="text" name="email" placeholder="Email" />
            <input ref="password" type="password" name="password" placeholder="Password" />
            <button type="button">Login</button>
          </form>
        </div>
    );
  }
}

export default UserInfo;

Dies ist auch das Formularbeispiel in React v.16, nur als Referenz für das Formular, das Sie in der Zukunft erstellen:

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>
    );
  }
}
3
Alireza

Dies kann auch verwendet werden. 

handleChange: function(state,e) {
  this.setState({[state]: e.target.value});
},
render : function() {
  return (
    <form>
      <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
      <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange.bind(this, 'password')}/>
      <button type="button" onClick={this.handleLogin}>Login</button>
    </form>
  );
},
handleLogin: function() {
  console.log("EMail: ", this.state.email);
  console.log("Password: ", this.state.password);
}
2
Yurii Kosygin

Dies könnte Benutzern von Meteor (v1.3) helfen:

render: function() {
    return (
        <form onSubmit={this.submitForm.bind(this)}>
            <input type="text" ref="email" placeholder="Email" />
            <input type="password" ref="password" placeholder="Password" />
            <button type="submit">Login</button>
        </form>
    );
},
submitForm: function(e) {
    e.preventDefault();
    console.log( this.refs.email.value );
    console.log( this.refs.password.value );
}
1
Joe L.

Klareres Beispiel mit es6 Zerstörung

class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            login: null,
            password: null,
            email: null
        }
    }

    onChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    onSubmit(e) {
        e.preventDefault();
        let login = this.state.login;
        let password = this.state.password;
        // etc
    }

    render() {
        return (
            <form onSubmit={this.onSubmit.bind(this)}>
                <input type="text" name="login" onChange={this.onChange.bind(this)} />
                <input type="password" name="password" onChange={this.onChange.bind(this)} />
                <input type="email" name="email" onChange={this.onChange.bind(this)} />
                <button type="submit">Sign Up</button>
            </form>
        );
    }
}
1
Sergio Ivanuzzo

Ergänzung zu Michael Schocks Antwort:

class MyForm extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    console.log(data.get('email')); // reference by form input's `name` tag

    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <label htmlFor="email">Enter your email</label>
        <input id="email" name="email" type="email" />

        <label htmlFor="birthdate">Enter your birth date</label>
        <input id="birthdate" name="birthdate" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}

Siehe diesen Medium-Artikel: Wie man Formulare mit Just React behandelt

Diese Methode ruft Formulardaten nur ab, wenn die Schaltfläche Senden gedrückt wird. Viel sauberer IMO!

0
hoohoo-b

Wenn Sie einen Elementnamen mehrfach vorkommen, müssen Sie forEach () verwenden. 

html

  <input type="checkbox" name="delete" id="flizzit" />
  <input type="checkbox" name="delete" id="floo" />
  <input type="checkbox" name="delete" id="flum" />
  <input type="submit" value="Save"  onClick={evt => saveAction(evt)}></input>

js

const submitAction = (evt) => {
  evt.preventDefault();
  const dels = evt.target.parentElement.delete;
  const deleted = [];
  dels.forEach((d) => { if (d.checked) deleted.Push(d.id); });
  window.alert(deleted.length);
};

Beachten Sie, dass dies in diesem Fall eine RadioNodeList ist, kein Array und keine Iterable. ForEach () ist eine integrierte Methode der Listenklasse. Sie können hier keine Karte () oder Verkleinerung () verwenden.

0
Jeff Lowery

Die Benutzererfahrung zu verbessern; Wenn der Benutzer auf die Schaltfläche "Senden" klickt, können Sie versuchen, dass das Formular zuerst eine sendende Nachricht anzeigt. Sobald wir eine Antwort vom Server erhalten haben, kann er die Nachricht entsprechend aktualisieren. Dies erreichen wir in React durch die Verkettung von Status. Siehe codepen oder Schnipsel weiter unten:

Die folgende Methode führt die erste Statusänderung durch:

handleSubmit(e) {
    e.preventDefault();
    this.setState({ message: 'Sending...' }, this.sendFormData);
}

Sobald React die obige Sending-Nachricht auf dem Bildschirm anzeigt, ruft es die Methode auf, die die Formulardaten an den Server sendet: this.sendFormData (). Zur Vereinfachung habe ich ein setTimeout hinzugefügt, um dies zu simulieren.

sendFormData() {
  var formData = {
      Title: this.refs.Title.value,
      Author: this.refs.Author.value,
      Genre: this.refs.Genre.value,
      YearReleased: this.refs.YearReleased.value};
  setTimeout(() => { 
    console.log(formData);
    this.setState({ message: 'data sent!' });
  }, 3000);
}

In React gibt die Methode this.setState () eine Komponente mit neuen Eigenschaften wieder. Sie können also in der render () - Methode der Formularkomponente Logik hinzufügen, die sich je nach Art der Antwort, die wir vom Server erhalten, unterschiedlich verhält. Zum Beispiel:

render() {
  if (this.state.responseType) {
      var classString = 'alert alert-' + this.state.type;
      var status = <div id="status" className={classString} ref="status">
                     {this.state.message}
                   </div>;
  }
return ( ...

codepen

0
Homam Bahrani

Ich benutze wie folgt mit React Component Zustand:

<input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />

handleChange(e){
   this.setState({[e.target.name]: e.target.value})
}`
0
Adnan Boota