ReactJS提交表单时如何获取多个收件人邮箱与对应复选框的值

问题核心由状态设计缺陷、循环索引错乱、复选框状态未同步存储三类问题导致，具体修复逻辑如下：

现存问题梳理 #

• map循环内反复对index执行++操作，同一行的邮箱输入框和复选框的索引完全错位，无法对应关联
• 仅用recipientEmails存储邮箱值，没有预留复选框选中状态的存储位置
• handlepermission为空实现，复选框的选中状态从未被记录到状态中
• 所有邮箱输入框使用相同idcomponent-simple，不符合DOM规范，会导致label点击跳转异常

修正后完整代码 #

import { useState } from 'react';
import { Box, FormControl, InputLabel, Input, FormControlLabel, Checkbox } from '@mui/material';

// 替换为实际的样式引入路径
// import styles from './xxx.module.css';
const count = 3; // 替换为实际的收件人输入项数量配置

export default function ShareReportView(props) {
  // 状态结构调整：以索引为key，存储每行的邮箱和权限配置
  const [recipientList, updateRecipientList] = useState({});

  // 统一处理输入变化，支持文本框和复选框
  const handleFieldChange = (index, field, value) => {
    updateRecipientList(prev => ({
      ...prev,
      [index]: {
        ...prev[index],
        [field]: value
      }
    }));
  };

  // 提取提交数据
  const extractSubmitData = (list) => {
    if (!list || !Object.keys(list).length) return [];
    return Object.values(list).map(item => ({
      email: item.email || '',
      allowEdit: item.allowEdit || false
    }));
  };

  const sendEmail = () => {
    const submitData = extractSubmitData(recipientList);
    console.log('提交的所有收件人数据：', submitData);
    // 此处补充发送邮件的业务逻辑即可，submitData内每一项同时包含邮箱和对应复选框状态
  };

  return (
    <div className="container">
      {[...Array(count)].map((val, index) => (
        <div key={index} className={styles.textField}>
          <div style={{ float: "left" }}>
            <Box
              component="form"
              sx={{
                "& > :not(style)": { marginRight: 4, width: "31ch" },
              }}
              noValidate
              autoComplete="off"
            >
              <FormControl variant="standard">
                <InputLabel
                  htmlFor={`recipient_email_${index}`}>
                  Recipient E mail
                </InputLabel>
                <Input
                  id={`recipient_email_${index}`}
                  onChange={(e) => handleFieldChange(index, 'email', e.target.value)}
                  disableUnderline={true}
                />
              </FormControl>
              <FormControlLabel
                control={
                  <Checkbox
                    color="default"
                    checked={!!recipientList[index]?.allowEdit}
                    onChange={(e) => handleFieldChange(index, 'allowEdit', e.target.checked)}
                  />
                }
                label="Allow user to perfrom action"
              />
            </Box>
          </div>
        </div>
      ))}
      <div className="btn">
        <button
          className={styles.send}
          onClick={sendEmail}
        >
          SEND
        </button>
      </div>
    </div>
  )
}

关键改动说明 #

• 调整状态结构，按行存储邮箱和复选框状态，确保同一行的两个字段天然关联
• 移除所有循环内的index++操作，直接使用map返回的原始索引作为唯一标识
• 统一字段更新逻辑，复选框选中状态实时同步到状态中，同时绑定checked属性保证视图和状态一致
• 邮箱输入框id增加索引后缀，保证全局唯一

表单效果参考：

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