Cara Menggunakan Form Di React.js
Sebagai seorang software developer, penting untuk mengembangkan kemampuan untuk mempelajari bahasa, konsep, dan ide baru. Kemampuan Anda untuk mengerti dan menunjukkan korelasi sebagai pemecah masalah pasti membuat Anda menonjol sebagai developer tahap awal. Pembuat kode baru menggunakan waktu mereka untuk mencoba dan sepenuhnya memahami bahasa dan propertinya — yang dapat dimengerti — tapi sering kali menghindari praktik memetakan metode untuk memecahkan masalah dan merumuskan track secara logis untuk menemukan solusi yang berhasil dan masuk akal!
software developer sudah menggunakan kerangka kerja seperti React dan mengalami kerumitan yang cenderung menimpa mereka yang mempelajarinya untuk pertama kali. React adalah kerangka kerja dan library JavaScript sumber terbuka yang dikembangkan oleh Facebook yang membantu pengembang membuat interface pengguna yang interaktif dan dinamis untuk aplikasi web dan seluler. Lebih khusus lagi, ini menyediakan sekumpulan komponen yang membantu pengembang membuat interface pengguna.
Ada beberapa alasan mengapa React sulit untuk dipelajari: kurva pembelajaran yang lebih curam, sintaks JSX, dan kegunaan komponen pembelajaran di balik terpal. Komponen dan konsep seperti useState memerlukan pemahaman tentang apa yang Anda ingin interface Anda lakukan, tapi dengan pendekatan yang lebih bersih. Ambil contoh penanganan acara. Penanganan acara di Node.js melibatkan EventTarget.addEventListener digabungkan dengan fungsi panggilan balik dan jenis acara. Di React, kami menggunakan pendekatan sama, kecuali sekarang kami melibatkan komponen dan status dalam campuran.
Sebagai contoh, kita bisa membuat situs web Pokemon yang menampilkan 100 Pokemon pertama, dan dengan komponen Formulir tambahan yang memungkinkan kita menambahkan Pokemon yang tidak termasuk dalam 100 Pokemon pertama.
// Pokemon Form Component
function PokemonForm() {
return (
<div>
<h3>Add Pokemon Name:</h3>
<form
>
<input
fluid label="Name"
placeholder="Name"
name="name"
/>
<button>Submit</button>
</form>
</div>
);
}
export default PokemonForm;Saya sudah menampilkan komponen formulir biasa yang disebut PokemonForm yang mengembalikan elemen formulir menggunakan JSX yang hanya meminta untuk memasukkan nama Pokemon. PokemonForm ini mengekspor ke komponen PokemonPage. Di komponen PokemonPage, kami menambahkan Status yang akan menginisialisasi 100 Pokemon yang tercetak di halaman, lalu kami akan memberikan nilai input dari PokemonForm, dan menambahkannya ke status yang dibuat di komponen PokemonPage, dengan begitu kami akan melakukannya selalu tampilkan 100 Pokemon pertama plus yang ditambahkan menggunakan formulir.
// Pokemon Page Component
import React, {useState} from "react";
import PokemonForm from "./PokemonForm";
import { Container } from "semantic-ui-react";
import { pokemon } from "../data/pokemon";
function PokemonPage() {
const filteredPoke = pokemon.filter((poke)=>{
return poke.id <= 100;
})
const [poke,setPoke]=useState(filteredPoke);
const [formData,setFormData] = useState('');
return (
<Container>
<PokemonForm
/>
</Container>
);
}
export default PokemonPage;Seperti disebutkan di atas, kami telah menetapkan status untuk menyodok yang mana semua Pokemon diambil dari mengimpor kumpulan data Pokemon lokal dan difilter untuk hanya menambahkan 100 Pokemon pertama. Kami telah menggunakan Status baru untuk formData kami agar sama dengan string kosong, karena kami cuma menanyakan nama Pokemon di Formulir kami. Ingat, tujuan kita adalah menambahkan Pokemon baru di Formulir kita ke Poke Negara kita, yang akan selalu menampilkan 100 Pokemon pertama plus apa pun yang ditambahkan dari komponen Formulir.
Sekarang, kami ingin mengatur fungsi handleChange di komponen PokemonPage kami, yang akan kami turunkan ke komponen PokemonForm sebagai penyangga sehingga penambahan Pokemon baru melalui nilai input Formulir kemudian akan ditambahkan ke status formData, yang kami juga akan diturunkan sebagai penyangga untuk PokemonForm. PokemonForm akan menggunakan event listener onChange untuk mendengarkan perubahan pada atribut value di elemen input.
// Pokemon Page Component
import React, {useState} from "react";
import PokemonForm from "./PokemonForm";
import { Container } from "semantic-ui-react";
import { pokemon } from "../data/pokemon";
function PokemonPage() {
const filteredPoke = pokemon.filter((poke)=>{
return poke.id <= 100;
})
const [poke,setPoke]=useState(filteredPoke);
const [formData,setFormData] = useState('');
//Adding the handleChange function
function handleChange(e){
setFormData(e.target.value);
}
//passing down the handleChange and formData as props to PokemonForm component
return (
<Container>
<PokemonForm
handleChange={handleChange}
formData={formData}
/>
</Container>
);
}
export default PokemonPage;// Pokemon Form Component
function PokemonForm({ handleChange, formData }) {
return (
<div>
<h3>Add Pokemon Name:</h3>
<form
>
<input
fluid label="Name"
placeholder="Name"
name="name"
value={formData}
onChange={handleChange}
/>
<button>Submit</button>
</form>
</div>
);
}
export default PokemonForm;Jadi , kami sekarang telah menambahkan nama Pokemon yang dimasukkan ke status formData. Terakhir, kami ingin memiliki event listener onSubmit yang akan digunakan untuk mengirimkan formulir. Saat kami mengirimkan formulir, seperti yang telah kami lakukan di Node.js, kami akan mencegah browser memuat ulang halaman dengan menggunakan.preventDefault, dan akhirnya kami ingin menambahkan Pokemon yang dimasukkan ke status awal kami . Jadi, kami akan membuat fungsi handleSubmit di komponen PokemonPage dan meneruskannya sebagai penyangga ke PokemonForm.
// Pokemon Page Component
import React, {useState} from "react";
import PokemonForm from "./PokemonForm";
import { Container } from "semantic-ui-react";
import { pokemon } from "../data/pokemon";
function PokemonPage() {
const filteredPoke = pokemon.filter((poke)=>{
return poke.id <= 100;
})
const [poke,setPoke]=useState(filteredPoke);
const [formData,setFormData] = useState('');
function handleChange(e){
setFormData(e.target.value);
}
// handleSubmit function that sets poke state for first 100 pokemon plus
// the formData pokemon
function handleSubmit(e){
e.preventDefault();
const newPoke = pokemon.filter((poke)=>{
return {
poke.id <= 100 && pokemon.name.toLowerCase() === formData.toLowerCase();
}
})
setPoke(newPoke);
// reset the formData component after adding the inputed pokemon
setFormData('');
}
//passing down the handleSubmit to PokemonForm component
return (
<Container>
<PokemonForm
handleChange={handleChange}
formData={formData}
handleSubmit={handleSubmit}
/>
</Container>
);
}
export default PokemonPage;// Pokemon Form Component
function PokemonForm({ handleChange, formData, handleSubmit }) {
return (
<div>
<h3>Add Pokemon Name:</h3>
<form
onSubmit={handleSubmit}
>
<input
fluid label="Name"
placeholder="Name"
name="name"
value={formData}
onChange={handleChange}
/>
<button>Submit</button>
</form>
</div>
);
}
export default PokemonForm;Kami sudah membuat formulir yang menambahkan Pokemon baru dari komponen Formulir melalui Negara dan menggunakan alat peraga yang diteruskan dari induk ke anak, lalu dicadangkan dari anak ke induk. Setelah kita menyetel Status poke, kita kemudian mereset status formData ke string kosong sehingga nilai elemen masukan formulir disetel ulang, dan kita dapat menambahkan Pokemon lain jika kita mau!
Inilah tantangan yang terkait dengan pemrograman di React; sinergi antara komponen parent dan child yang akan menciptakan user interface yang optimal.