cara mengirim data kotak centang di reactjs

Saya tidak tahu bagaimana menjelaskannya dengan benar, tetapi saya akan mencoba. Saya memiliki beberapa kotak centang yang menunjukkan hari apa toko akan dibuka. Jadi, saya punya api data ini

masukkan deskripsi gambar di sini

, di mana day_of_week memberi tahu pada hari apa kotak centang harus dicentang. Mantan. Lihat disini

masukkan deskripsi gambar di sini

Saya perlu mengirimkan atribut yang tepat ke server, yaitu day_of_week untuk mengubah status kotak centang. Namun, kini hanya satu kotak centang yang dapat dicentang. Ini kode saya

  {businessGroup.opening_hours ? businessGroup.opening_hours.map((open_hour, i) => (
              <div key={i} className="openHours d-flex">

                <DatePicker
                  placeholder="Start Date"
                />
                <DatePicker
                  placeholder="End Date"
                />

                <div className="weekDays">
                  {
                    ['Mo1', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map((day, inx) => (
                      <div className="weekChekbox" key={inx}>
                        <div>{day}</div>
                        <Checkbox
                          checked={open_hour.day_of_week === inx}
                          onChange={() => this.setState({
                            businessGroup: {
                              ...businessGroup,
                              opening_hours: [
                                ...businessGroup.opening_hours.splice(0, i),
                                {
                                  ...businessGroup.opening_hours[0],
                                day_of_week: inx,
                                },
                                ...businessGroup.opening_hours.splice(1),
                              ],
                            },
                          })}
                        />
                      </div>
                    ))

                  }
                </div>
})

Jangan terlalu memperhatikan tanda kurung tutup, itu tidak penting sekarang, karena saya hanya memotong sebagian kode dari keseluruhan kode. Jadi, bagaimana saya harus membuat onChange saya dengan benar untuk mengirim hari_minggu_dengan benar dan kotak centang apa pun dapat dicentang.

Terima kasih)


reactjs checkbox
person Feruza    schedule 27.11.2018    source sumber
comment
untuk kotak centang Anda mendapatkan acara dari mana Anda dapat memeriksa e.target.checked untuk mengetahui apakah kotak centang dicentang atau tidak   -  person warl0ck    schedule 27.11.2018
comment
@ warl0ck bisakah Anda menunjukkan cara menulis onChange dengan benar?)   -  person Feruza    schedule 27.11.2018

Jawaban (1)


arrow_upward
0
arrow_downward

Anda perlu memeriksa nilai checked dari target acara di panggilan balik onChange Anda.

dalam kode Anda:

<Checkbox
  checked={open_hour.day_of_week === inx}
  onChange={(e) => this.setState({checked: e.target.checked})}
/>

Lihat demo jsfiddle ini

person warl0ck    schedule 27.11.2018