0
Kayıt Ol

React form kaydetme algoritması karışıklığı.. yardım

3

●

64

  • 05-07-2023, 01:41:24
    #1
    Misafir
    Misafir
    Selamlar,
    Almam gereken 3 farklı input var. Bunları ay'a göre 3 farklı inputun içinde kaydedeceğim. Örneğin, December ayı için decemberA decemberB DecemberC şeklinde olacak. Fakat select ile bunun kontrolünü nasıl sağlayacağım ? Kullanıcı december seçtiyse 12 farklı seçenek içinden hangisine kaydedeceğini inputlara nasıl value ekleyeceğim ? Veritabanı olarak Supabase kullanmaktayım.


    Kodlar böyledir. Inputlarda value henüz eklemedim kafam karıştığı için.. Selecte de value yok, burda da kafam karıştı.

  • 05-07-2023, 02:20:27
    #2
    Developer
    Developer
    İ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.
  • 05-07-2023, 02:35:48
    #3
    Misafir
    Misafir
    Developer adlı üyeden alıntı: mesajı görüntüle
    İ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.
    Emeğiniz ve uğraşınız için gerçekten teşekkürler hocam. Peki sadece c değerini çağırabilecek miyim ? Misal decemberC .data dediğimde bu C verisi gelecek mi ? yoksa aynı anda 3 veriyi birden mi çağıracak
  • 05-07-2023, 03:06:42
    #4
    Developer
    Developer
    Her inputta farklı inputKey vereceksiniz. Öyle yaparsanız çağırabilirsiniz.