Bagaimana Anda membuat kolom input dinamis di html?

Question

menulis

Hai Bruno,

Table of Contents Show

Cara Membuat Formulir di React
Cara Membuat Form Dinamis di React
Cara Menambahkan Nilai dari InputFields State
Cara Menambahkan Lebih Banyak Bidang Formulir
Cara Membuat Tombol Kirim
Cara Menghapus bidang menggunakan Tombol Hapus
Apa itu bidang input dinamis?
Bagaimana cara membuat bidang teks dinamis dalam JavaScript?
Bagaimana cara mengubah jenis input secara dinamis?
Apa itu bidang formulir dinamis?

Temukan terlampir contoh eSpace. Semoga ini yang Anda inginkan
Bersulang,
Andre

Hai, saya tidak dapat membuka file OML karena terlalu lama. Bisakah Anda memperbarui contoh Anda sehingga saya dapat menjalankannya di 9. 0. 1 versi sistem luar

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

 const handleFormChange = (index, event) => {
    let data = [...inputFields];
 }

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: ''}
])

_0

Dan sebuah fungsi juga, yang akan dipicu saat tombol ini diklik

const [inputFields, setInputFields] = useState([
    {name: '', age: ''}
])

_1

Mari tambahkan fungsi ke tombol melalui event onClick

const [inputFields, setInputFields] = useState([
    {name: '', age: ''}
])

_2

Sekarang, 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: ''}
])

_3

Kemudian setel bidang baru ini di dalam status inputFields

const [inputFields, setInputFields] = useState([
    {name: '', age: ''}
])

_4

Di 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: ''}
])

_5

Kami 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: ''}
])

_6

Tambahkan fungsi ini ke tombol Kirim

const [inputFields, setInputFields] = useState([
    {name: '', age: ''}
])

_7

Dan juga di tag formulir

const [inputFields, setInputFields] = useState([
    {name: '', age: ''}
])

_8

Jika 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: ''}
])

_9

Kami 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;

0

Jadi, 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;

1

Kami 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;

2

Dan 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;

_3

Kemudian, 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;

_4

Sekarang, 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. )

Nishant Kumar

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

Apa itu bidang input dinamis?

Bidang masukan dinamis memungkinkan pemberian banyak nilai dalam satu formulir . Ini sangat berguna ketika Anda ingin menerima banyak masukan untuk bidang yang sama dalam formulir HTML. Fitur kolom input dinamis dapat dengan mudah diintegrasikan menggunakan jQuery. Anda dapat menambahkan beberapa kolom dan menghapus kolom dengan mudah.

Bagaimana cara membuat bidang teks dinamis dalam JavaScript?

var elemen = dokumen. createElement('masukan'); . jenis = "teks"; . placeholder = "Masukan Baru"; . .

membuat elemen masukan baru

Tambahkan teks jenis

tambahkan elemen ke DOM

Bagaimana cara mengubah jenis input secara dinamis?

HTML tidak mengizinkan atribut Type dimodifikasi dengan JavaScript pada saat runtime dan karenanya hal yang sama dapat dicapai dengan membuat TextBox dinamis di samping Password TextBox dan menyembunyikan Password TextBox . Markup HTML terdiri dari Kotak Teks Kata Sandi HTML dan Kotak Centang. . The HTML Markup consists of an HTML Password TextBox and a CheckBox.

Apa itu bidang formulir dinamis?

Buat perubahan waktu nyata pada formulir Anda berdasarkan masukan pengguna, simpan progres pelanggan agar mereka dapat menyelesaikannya nanti di perangkat apa pun, dan mengisi data terlebih dahulu untuk mengurangi kesalahan . Formulir dinamis juga memungkinkan Anda memvalidasi bidang untuk pemformatan yang benar dan secara otomatis memverifikasi data seperti alamat dan nomor kartu kredit.

kode html