Question

我没有正确解释的方法，但是我会尝试的。我有多个复选框，代表商店将在一周中的哪一天开放。所以，我有这个数据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，并且可以选中任何复选框。

谢谢）

Answer 1

您将需要在onChange回调中检查事件目标的checked值。

在您的代码中：

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

选中此jsfiddle demo

如何在reactjs中发送复选框数据

1 个答案: