Hai Bruno,
Temukan terlampir contoh eSpace. Semoga ini yang Anda inginkan
Bersulang,
Andre
Dalam tutorial ini, mari kita pelajari cara membuat formulir dinamis di React. Dengan menggunakan formulir dinamis, kita dapat menambahkan atau menghapus bidang sesuai kebutuhan kita
Jadi, mari kita mulai
Cara Membuat Formulir di React
Mari kita buat bentuk sederhana terlebih dahulu. Sintaksnya mudah
import './App.css'; function App() { return ( <div className="App"> <form> <div> <input name='name' placeholder='Name' /> <input name='age' placeholder='Age' /> </div> </form> </div> ); } export default App;Inilah tampilannya
Kami memiliki dua bidang input, yaitu Nama dan Umur. Tapi bidang ini statis. Jadi, mari buat mereka dinamis menggunakan React States
Cara Membuat Form Dinamis di React
Buat satu status yang disebut InputFields. Itu akan memiliki objek, dengan properti name dan age
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_Sekarang, mari petakan kolom formulir kita dari status inputFields
import { useState } from 'react'; import './App.css'; function App() { const [inputFields, setInputFields] = useState([ { name: '', age: '' } ]) return ( <div className="App"> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input name='name' placeholder='Name' /> <input name='age' placeholder='Age' /> </div> ) })} </form> </div> ); } export default App;Sekarang, kita hanya akan melihat satu set field input, karena kita hanya memiliki satu objek di state inputFields. Jika kami menambahkan lebih banyak objek, kami akan melihat banyak kolom input
Cara Menambahkan Nilai dari InputFields State
Sekarang, mari tambahkan nilai dari status inputFields ke kolom input
import { useState } from 'react'; import './App.css'; function App() { const [inputFields, setInputFields] = useState([ { name: '', age: '' } ]) return ( <div className="App"> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input name='name' placeholder='Name' value={input.name} /> <input name='age' placeholder='Age' value={input.age} /> </div> ) })} </form> </div> ); } export default App;Nilai akan menjadi masukan. nama dan masukan. usia
Mari tambahkan juga event onChange yang akan dijalankan saat kita mengetikkan sesuatu di kolom input
Buat fungsi bernama handleFormChange
const handleFormChange = () => { }_Tetapkan fungsi ini ke kolom input sebagai event onChange
<div key={index}> <input name='name' placeholder='Name' value={input.name} onChange={event => handleFormChange(index, event)} /> <input name='age' placeholder='Age' value={input.age} onChange={event => handleFormChange(index, event)} /> </div>Acara onChange ini mengambil dua parameter, indeks dan acara. Index adalah indeks dari array dan event adalah data yang kita ketik di field input. Kami meneruskannya ke fungsi handleFormChange
const handleFormChange = (index, event) => { }_Tapi masalahnya, jika kita mencoba mengetikkan sesuatu di kolom input, kita tidak akan bisa. Karena kita belum mengatur status di formFields. Jadi, ayo lakukan itu
Mari kita simpan status inputFields kita ke dalam variabel yang disebut data menggunakan operator spread (tiga titik import { useState } from 'react'; import './App.css'; function App() { const [inputFields, setInputFields] = useState([ { name: '', age: '' } ]) return ( <div className="App"> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input name='name' placeholder='Name' /> <input name='age' placeholder='Age' /> </div> ) })} </form> </div> ); } export default App; 5)
Kemudian, kita akan menargetkan indeks variabel data menggunakan parameter indeks, dan juga nama propertinya
const handleFormChange = (index, event) => { let data = [...inputFields]; data[index][event.target.name] = event.target.value; }_Sebagai contoh, misalkan kita mengetik di kolom input dengan indeks 0. Jadi, kami menentukan indeks dalam data, dan nama properti, menggunakan event. target. nama. Dan di dalam indeks data ini, kami menyimpan nilai dari field input menggunakan event. target. nilai
Sekarang, kita perlu menyimpan data ini kembali ke dalam array inputFields menggunakan metode setInputFields
const handleFormChange = (index, event) => { let data = [...inputFields]; data[index][event.target.name] = event.target.value; setInputFields(data); }Sekarang, jika kita mengetikkan sesuatu di kolom input, itu akan muncul di kolom input
Cara Menambahkan Lebih Banyak Bidang Formulir
Mari buat tombol untuk menambahkan lebih banyak bidang formulir
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_0Dan sebuah fungsi juga, yang akan dipicu saat tombol ini diklik
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_1Mari tambahkan fungsi ke tombol melalui event onClick
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_2Sekarang, di fungsi addFields, kita perlu membuat objek. Dan setiap kali kita mengklik tombol, itu akan didorong ke status inputFields, sehingga membuat kolom input baru
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_3Kemudian setel bidang baru ini di dalam status inputFields
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_4Di sini, kami juga mengatur inputFields yang ada menggunakan operator spread, bersamaan dengan newfield
Jika kita mengklik tombol Add Field sekarang, itu akan membuat field input baru
Cara Membuat Tombol Kirim
Mari buat tombol Kirim dan satu fungsi untuk melihat data kita saat kita mengirimkan formulir
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_5Kami juga membutuhkan fungsi yang akan dipicu saat kami mengklik tombol ini. Ini akan mencatat data di konsol, dari kolom input. Ini juga memiliki metode yang disebut e. preventDefault() yang akan mencegah halaman disegarkan
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_6Tambahkan fungsi ini ke tombol Kirim
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_7Dan juga di tag formulir
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_8Jika kami mengirimkan, kami akan melihat data kami di konsol
Cara Menghapus bidang menggunakan Tombol Hapus
Sekarang mari buat Tombol untuk menghapus bidang ini jika kita tidak menginginkannya
const [inputFields, setInputFields] = useState([ {name: '', age: ''} ])_9Kami juga membutuhkan fungsi.
import { useState } from 'react'; import './App.css'; function App() { const [inputFields, setInputFields] = useState([ { name: '', age: '' } ]) return ( <div className="App"> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input name='name' placeholder='Name' /> <input name='age' placeholder='Age' /> </div> ) })} </form> </div> ); } export default App; 0Jadi, tetapkan fungsi ini ke tombol Hapus
import { useState } from 'react'; import './App.css'; function App() { const [inputFields, setInputFields] = useState([ { name: '', age: '' } ]) return ( <div className="App"> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input name='name' placeholder='Name' /> <input name='age' placeholder='Age' /> </div> ) })} </form> </div> ); } export default App; 1Kami meneruskan indeks sebagai parameter, yang merupakan indeks bidang input
Kemudian, terima indeks ini dalam fungsi
import { useState } from 'react'; import './App.css'; function App() { const [inputFields, setInputFields] = useState([ { name: '', age: '' } ]) return ( <div className="App"> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input name='name' placeholder='Name' /> <input name='age' placeholder='Age' /> </div> ) })} </form> </div> ); } export default App; 2Dan seperti sebelumnya, kita perlu membuat variabel baru dan menyimpan status inputFields dalam variabel baru itu
import { useState } from 'react'; import './App.css'; function App() { const [inputFields, setInputFields] = useState([ { name: '', age: '' } ]) return ( <div className="App"> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input name='name' placeholder='Name' /> <input name='age' placeholder='Age' /> </div> ) })} </form> </div> ); } export default App; _3Kemudian, kita perlu menggabungkan variabel data ini dengan indeks. Kemudian kita perlu menyimpannya dalam status inputFields menggunakan setInputFields
import { useState } from 'react'; import './App.css'; function App() { const [inputFields, setInputFields] = useState([ { name: '', age: '' } ]) return ( <div className="App"> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input name='name' placeholder='Name' /> <input name='age' placeholder='Age' /> </div> ) })} </form> </div> ); } export default App; _4Sekarang, jika kita mengklik hapus, itu akan menghapus bidang formulir itu
Jadi kami memiliki lima kolom input di sini, dengan lima nama berbeda. Mari kita hapus input dari Nishant
Anda lihat itu telah dihapus. Dan jika kami mengirimkan, kami akan melihat data terbaru kami di konsol
Membungkus
Sekarang Anda tahu cara membuat formulir dinamis di React. Selamat
Anda juga dapat menonton video saya dengan topik yang sama Bentuk Dinamis - Cara Menambahkan Formulir Dinamis di React
Coba kode di sini – https. //github. com/nishant-666/Dynamic-Forms
Selamat belajar. )
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
Saya membangun proyek untuk mempelajari cara kerja kode. Dan meskipun saya tidak membuat kode, saya menikmati menulis puisi dan cerita, bermain piano, dan memasak makanan lezat
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai