İki farklı state'e ihtiyacınız var. Bir tanesi ay değerini tutacak, diğeri ise form değişkenlerini tutacak.
const [ month, setMonth ] = useState("december"),
[ form, setForm ] = useState({});Daha sonrasında ay seçici selectbox'ını month state'ine bağlayacaksınız.
Bu aşamadan sonra seçilen month değerini inputlarda key seçici olarak kullanacaksınız. Yani formun şu şekilde olduğunu düşünürseniz:
{
december: {
a: 5,
b: 6,
c: 7
}
}Inputlarda da key ve name değeri kullanılıp, form güncellemesi yapılacak. Örneğin 1. inputun denk geldiği prop "inputName" diyelim. Form üzerinde form[month]["inputName"] obje yolunu güncelleyeceksiniz. Örnek:
const getForm = form;
getForm[month][inputName] = value;
setForm(getForm);
veya
setForm({
...form,
[month]: {
...form[month],
inputName: value
}
})Olarak yapabilirsiniz. Burada month değeri değiştikçe hem inputlardaki veri değişecek hem de yazıldığı alanlar değişecek. Inputlara da value değeri "form[month][inputName]" şeklinde çağırılacak.