如何在反應中設置復選框中的多個數據？

Question

在我的代碼中，我有 5 個復選框，如果它們被選中，我想推送它們的值，但是當我勾選一個復選框，然后勾選另一個復選框時，會顯示一個錯誤，上面寫着TypeError: Cannot read property 'value' of null

這是我的代碼：

import React, { useState, useEffect } from 'react';
import Label from '../../styles/Label';

function AlertReminder() {
  const [selectedReminders, setSelectedReminders] = useState([]);

  useEffect(() => {
    console.log(selectedReminders);
  }, [selectedReminders]);

  const remindersList = '1 hour before,12 hour before,24 hour before,48 hour before,1 week ago'.split(',');
  console.log(remindersList);
  const changeHandler = (e) => {
    if (selectedReminders.includes(e.target.value)) {
      selectedReminders.splice(selectedReminders.indexOf(e.target.value), 1);
      console.log(selectedReminders);
    } else {
      setSelectedReminders(selectedReminders => [...selectedReminders, e.target.value]);
      console.log(selectedReminders);
    }
  };

  return (
    <div>
      <Label>Alert Reminders:</Label>

      <form>

        {
        remindersList.map(
          (c) => (
            <label>
              {c}
              <input type="checkbox" value={c} onChange={changeHandler} />
            </label>
          )
        )
      }
      </form>
    </div>
  );
}

export default AlertReminder;

Answer 1

React 使用合成事件，當您嘗試在 if/else 語句中使用它時，它已經消失了。

有以下三種解決方案：

1. 為了讓它持久化，你需要用e.persist()開始你的 changeHandler（只需在const changeHandler = (e) => {之后添加它）。
2. 以const target = e.target開始 changeHandler ，然后使用target而不是e.target 。
3. 以const value = e.target.value開始 changeHandler ，然后使用value而不是e.target.value 工作代碼（沙箱） 。

在react docs 中有更多關於此的信息。 請注意，在 React 17 中，您將按預期使用e.target.value （ 發行說明）。