Неопределенный e.target.name для компонента переключенного состояния

Question

Я сталкиваюсь с ошибками при попытке настроить список тумблеров / переключателей с помощью useState. Все начальные состояния работают правильно, и страница отображается, однако, когда я нажимаю на любой переключатель, я получаю следующую ошибку: TypeError: Невозможно прочитать свойство 'name' из undefined. Мне просто нужно установить состояние, на которое я нажал. Спасибо за любую помощь заранее.

import React, {useState} from 'react'
import Dashboard from './Dashboard'
import Switch from "react-switch"
import styles from './Settings.module.scss'

const Settings = () => {

const [privacyToggles, setprivacyToggles] = useState({
    newContentNotification: false,
    newCommentSubscribed: true,
    newCommentCommented: true,
    publicDonationInfo: false
})

const handleToggleChange = (e) => {

     setprivacyToggles({
         ...privacyToggles,
         [e.target.name]: !privacyToggles[e.target.name]
     })
}

return (
    <>  
        <Dashboard />
        <div className="section">
            <div className="container">
            <h2 className="title is-4">Settings</h2>
                <h3 className="title is-5">Privacy Settings</h3>
                <div className="columns">
                    <div className={styles.toggleList + " column is-full"}>
                        <label className={styles.toggleLabel}>
                            <Switch 
                                onChange={handleToggleChange} 
                                checked={privacyToggles.newContentNotification}
                                name="newContentNotification"
                            />
                            <span className={styles.toggleText}>Receive notification of new content published on the website</span>
                        </label>
                        <label className={styles.toggleLabel}>
                            <Switch 
                                onChange={handleToggleChange} 
                                checked={privacyToggles.newCommentSubscribed}
                                name="newCommentSubscribed"

                            />
                            <span className={styles.toggleText}>Receive notification when somebody adds a comment to an article I am subscribed to</span>
                        </label>
                        <label className={styles.toggleLabel}>
                            <Switch 
                                onChange={handleToggleChange} 
                                checked={privacyToggles.newCommentCommented}
                                name="newCommentCommented"

                            />
                            <span className={styles.toggleText}>Receive notification when somebody adds a comment to an article I commented on</span>
                        </label>
                        <label className={styles.toggleLabel}>
                            <Switch 
                                onChange={handleToggleChange} 
                                checked={privacyToggles.publicDonationInfo}
                                name="publicDonationInfo"
                            />
                            <span className={styles.toggleText}>Publish information about my donations and make them public on my profile</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </>
)
}

экспорт настроек по умолчанию

Answer 1

Switch onChange возвращает новое проверенное значение переключателя, события и id проп.

API

onChange ([checked], [event], [id]) Вызывается, когда пользователь нажимает или перетаскивает переключатель. Передается три аргумента: check, который является логическим значением, которое описывает предполагаемое будущее состояние проверенного prop (1), объект события (2) и id prop (3).

Если вы изменяете handleToggleChange для получения параметров значения и идентификатора, затем вы можете сопоставить поле с измененным значением.

const handleToggleChange = (value, e, id) => {
  setprivacyToggles({
    ...privacyToggles,
    [id]: value
  });
};

Затем передать "имя" в подпункт * id при подключении обработчика onClick

<Switch
  onChange={handleToggleChange}
  checked={privacyToggles.newContentNotification}
  id="newContentNotification"
/>

Answer 2

NEW Хорошо, я отредактировал ответ.

const handleToggleChange = (...args) => {
    setprivacyToggles({
      ...privacyToggles,
      [args[2]]: args[0]
    });
  };

НЕПРАВИЛЬНО react-switch предназначен для получения противоположного значения через событие onChange .

Вы можете проверить здесь .

Вы должны создать свой собственный компонент-переключатель, чтобы получить желаемый результат.