如何在Material-UI中获取Checkbox组件的value属性值

问题原因 #

1. 你在绑定onClick事件时没有将事件对象传入handleSendSelection函数，导致函数内接收的event参数为undefined，因此无法读取event.target.value。
2. 对于Material UI的Checkbox组件，官方更推荐使用onChange事件监听选中状态变化，更符合组件的交互逻辑。

解决方法 #

方案1：修改现有onClick绑定，传入事件对象

修改渲染代码，把事件对象传入处理函数：

// 写法1：箭头函数传参
<Checkbox value="Tutor 1" onClick={(e) => handleSendSelection(e)}/>
// 写法2：直接传入函数引用（更简洁）
<Checkbox value="Tutor 1" onClick={handleSendSelection}/>

修改后你的原处理函数即可正常打印value值。

方案2（更推荐）：使用onChange事件监听

Checkbox的核心交互是选中状态切换，使用onChange事件更合理，还可以直接获取当前是否选中的状态：

// 渲染代码
<Checkbox value="Tutor 1" onChange={handleSendSelection}/>

// 处理函数
const handleSendSelection = (event) => {
  console.log("value - ", event.target.value); // 输出：Tutor 1
  console.log("是否选中 - ", event.target.checked); // 输出布尔值表示当前勾选状态
}

多Checkbox场景拓展

如果需要同时管理多个Checkbox的选中值，可以配合状态存储：

import { useState } from 'react';
import Checkbox from '@mui/material/Checkbox';

function YourComponent() {
  // 存储所有选中的value
  const [selectedValues, setSelectedValues] = useState([]);

  const handleSelectionChange = (event) => {
    const currentValue = event.target.value;
    const isChecked = event.target.checked;

    if (isChecked) {
      // 选中时加入数组
      setSelectedValues([...selectedValues, currentValue]);
    } else {
      // 取消选中时从数组移除
      setSelectedValues(selectedValues.filter(item => item !== currentValue));
    }

    console.log("当前选中的所有值：", selectedValues);
  }

  return (
    <>
      <Checkbox value="Tutor 1" onChange={handleSelectionChange}/>
      <Checkbox value="Tutor 2" onChange={handleSelectionChange}/>
      <Checkbox value="Tutor 3" onChange={handleSelectionChange}/>
    </>
  )
}

内容的提问来源于stack exchange，提问作者Nishtha Pant