Dapatkan data formulir di ReactJS

Saya memiliki bentuk sederhana dalam renderfungsi saya , seperti:

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

Apa yang harus saya tulis di handleLogin: function() { ... }untuk mengakses Emaildan Passwordbidang saya?

Gunakan changeperistiwa pada input untuk memperbarui status komponen dan mengaksesnya di handleLogin:

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

Biola yang bekerja .

Baca juga dokumen, ada seluruh bagian yang didedikasikan untuk penanganan formulir: Formulir

Sebelumnya Anda juga bisa menggunakan mixin pembantu dua arah penyatuan data React untuk mencapai hal yang sama, tetapi sekarang sudah tidak digunakan lagi karena menetapkan nilai dan mengubah penangan (seperti di atas):

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

Dokumentasi ada di sini: Pembantu Pengikat Dua Arah .

Ada beberapa cara untuk melakukan ini:

1) Dapatkan nilai dari berbagai elemen bentuk berdasarkan indeks

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

2) Menggunakan atribut nama dalam 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) Menggunakan referensi

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

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

Contoh lengkap

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

Pendekatan alternatif adalah dengan menggunakan refatribut dan referensi nilai-nilai this.refs. Ini adalah contoh sederhana:

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

Info lebih lanjut dapat ditemukan di React docs: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

Karena banyak alasan yang dijelaskan dalam Bagaimana cara menggunakan tombol radio di Bereaksi? pendekatan ini tidak selalu yang terbaik, tetapi memang menyajikan alternatif yang berguna dalam beberapa kasus sederhana.

Cara mudah untuk berurusan dengan referensi:

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;

Menambahkan jawaban Michael Schock:

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

Lihat artikel Medium ini: Cara Menangani Formulir dengan Just React

Metode ini mendapatkan data formulir hanya ketika tombol Kirim ditekan. IMO jauh lebih bersih!

Anda bisa mengganti onClickevent handler pada tombol ke onSubmithandler pada form:

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

Kemudian Anda dapat menggunakan FormDatauntuk mem-parsing formulir (dan membangun objek JSON dari entri jika Anda mau).

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
}

Saya akan menyarankan pendekatan berikut:

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

}

Jika semua input / teks Anda memiliki nama, maka Anda dapat memfilter semua dari event.target:

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

Bentuk yang benar-benar tidak terkendali 😊 tanpa metode, nilai, nilai defaultChange ...

Bagi mereka yang tidak ingin menggunakan ref dan mengatur ulang negara dengan OnChangeacara, Anda bisa menggunakan pegangan OnSubmit sederhana dan loop melalui FormDataobjek. Contoh ini menggunakan React Hooks:

const LoginPage = () =>{
    const handleSubmit = (event) => {
        const formData = new FormData(event.target);
        event.preventDefault();
        for (var [key, value] of formData.entries()) {
            console.log(key, value);
        }
    }

    return (
        <div>
        <form onSubmit={
        handleSubmit
        }

        >
        <input type="text" name="username" placeholder="Email" />
        <input type="password" name="password"
        placeholder="Password" />
        <button type="submit">Login</button>
        </form>
        </div>)
        }

Juga, ini bisa digunakan juga.

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

Berikan masukan Anda seperti ini

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

maka Anda dapat mengaksesnya di handleLogin Anda seperti soo

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

Contoh yang lebih jelas dengan es6 destructing

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

Jika Anda menggunakan Redux dalam proyek Anda, Anda dapat mempertimbangkan untuk menggunakan komponen pesanan lebih tinggi ini https://github.com/erikras/redux-form .

Dalam banyak peristiwa dalam javascript, kita memiliki eventyang memberikan objek termasuk peristiwa apa yang terjadi dan apa nilainya, dll ...

Itulah yang kami gunakan dengan formulir di ReactJs juga ...

Jadi dalam kode Anda, Anda mengatur negara ke nilai baru ... sesuatu seperti ini:

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;

Juga ini adalah contoh formulir di Bereaksi v.16, sama seperti referensi untuk formulir yang Anda buat di masa depan:

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

Saya menggunakan seperti ini menggunakan status React Component:

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

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

 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>

Output gambar terlampir di sini

Ini mungkin membantu pengguna Meteor (v1.3):

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

Untuk meningkatkan pengalaman pengguna; ketika pengguna mengklik tombol kirim, Anda dapat mencoba mendapatkan formulir untuk pertama kali menampilkan pesan pengiriman. Setelah kami menerima tanggapan dari server, ia dapat memperbarui pesan sesuai dengan itu. Kami mencapai ini dalam Bereaksi dengan merantai status. Lihat codepen atau cuplikan di bawah ini:

Metode berikut membuat perubahan status pertama:

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

Segera setelah Bereaksi menunjukkan pesan pengiriman di atas pada layar, ia akan memanggil metode yang akan mengirim data formulir ke server: this.sendFormData (). Untuk kesederhanaan, saya telah menambahkan setTimeout untuk meniru ini.

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

Di Bereaksi, metode this.setState () merender komponen dengan properti baru. Jadi, Anda juga dapat menambahkan beberapa logika dalam metode render () dari komponen formulir yang akan berperilaku berbeda tergantung pada jenis respons yang kami dapatkan dari server. Misalnya:

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

Jika Anda memiliki beberapa kemunculan nama elemen, maka Anda harus menggunakan forEach ().

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

Perhatikan bahwa dels dalam hal ini adalah RadioNodeList, bukan array, dan bukan Iterable. ForEach () adalah metode bawaan dari kelas daftar. Anda tidak akan dapat menggunakan peta () atau mengurangi () di sini.

UPDATE: Sekarang Anda dapat menggunakan Formik paket eksternal untuk Bereaksi yang membuat berurusan dengan formulir sangat mudah!

Inilah tautan untuk memulai

https://jaredpalmer.com/formik