时间戳

首页 > 解决方案 > 切换状态组件的未定义 e.target.name

javascript - 切换状态组件的未定义 e.target.name

问题描述

尝试使用 useState 设置切换/开关列表时遇到错误。所有初始状态都正常工作并且页面呈现，但是当我单击任何切换时，我收到以下错误：TypeError：无法读取未定义的属性“名称”。我只需要设置我点击的那个的状态。感谢您提前提供任何帮助。

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

导出默认设置

标签： javascriptreactjsreact-hooks

解决方案

新 好的，我已经编辑了答案。

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

WRONG react-switch旨在通过onChange事件获取相反的值。

你可以在这里查看。

您应该构建自己的切换组件以获得所需的结果。

推荐阅读