วิธีส่งข้อมูลช่องทำเครื่องหมายใน reactjs

อธิบายไม่ถูกแต่จะพยายามครับ ฉันมีช่องทำเครื่องหมายหลายช่องที่ระบุว่าร้านจะเปิดในวันใดในสัปดาห์ ฉันมี data api นี้

ป้อนคำอธิบายรูปภาพที่นี่

โดยที่ day_of_week บอกว่าควรทำเครื่องหมายในช่องวันใด อดีต. ดูที่นี่

ป้อนคำอธิบายรูปภาพที่นี่

ฉันต้องส่งแอตทริบิวต์ที่ถูกต้องไปยังเซิร์ฟเวอร์ ซึ่งก็คือ day_of_week เพื่อเปลี่ยนสถานะของช่องทำเครื่องหมาย อย่างไรก็ตาม ขณะนี้คุณสามารถเลือกช่องทำเครื่องหมายได้เพียงช่องเดียวเท่านั้น นี่คือรหัสของฉัน

  {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>
})

อย่าไปสนใจวงเล็บปิดมากนัก เพราะตอนนี้มันไม่สำคัญแล้ว เพราะผมแค่ตัดโค้ดบางส่วนออกจากโค้ดทั้งหมด ดังนั้น ฉันควรทำอย่างไรให้ onChange ถูกต้องเพื่อส่ง day_of_week อย่างถูกต้อง และทำเครื่องหมายในช่องทำเครื่องหมายได้

ขอบคุณ)


person Feruza    schedule 27.11.2018    source แหล่งที่มา
comment
สำหรับช่องทำเครื่องหมาย คุณจะได้รับเหตุการณ์ซึ่งคุณสามารถเลือก e.target.checked เพื่อทราบว่าช่องทำเครื่องหมายถูกเลือกหรือไม่เลือก   -  person warl0ck    schedule 27.11.2018
comment
@ warl0ck คุณช่วยแสดงวิธีการเขียน onChange อย่างถูกต้องได้ไหม?)   -  person Feruza    schedule 27.11.2018


คำตอบ (1)


คุณจะต้องตรวจสอบค่า checked ของเป้าหมายเหตุการณ์ในการเรียกกลับ onChange ของคุณ

ในรหัสของคุณ:

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

ตรวจสอบการสาธิต jsfiddle นี้

person warl0ck    schedule 27.11.2018