React多映射与键存储：如何传递元素完整属性至提交操作

要实现提交时获取element的完整属性（name、price、type等），需要调整<option>的value存储方式和onChange的解析逻辑，具体处理如下：

• 修改option的value存储：HTML的<option>仅支持字符串类型的value，因此需要将完整的element对象序列化为JSON字符串，以此保存所有属性。
• 修正key值：确保每个<option>的key唯一，避免React渲染警告，这里可以用grouptype+element.name的组合值作为唯一标识。
• 更新onChange事件：将选中的JSON字符串解析回对象，存入状态中。

修改后的完整代码 #

// 数据处理逻辑保持不变
const groups1 = OrgServices.reduce((all, cur) => ((all[cur.grouptype] ??= []).push(...cur.servicetype), all), {});
const output1 = Object.entries(groups1).map(([k, v]) => ({ grouptype: k, servicetype: v }));

// 选择框组件
<select 
  id="type" 
  name="type" 
  onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
    // 解析选中的JSON字符串，排除默认选项
    const selectedValue = e.target.value;
    setTypeOfService(selectedValue ? JSON.parse(selectedValue) : null);
  }} 
  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
> 
  <option value="">Select Service Type:</option>
  {output1.map((service) => 
    service.servicetype.map(element => (
      <option 
        key={`${service.grouptype}-${element.name}`}
        value={JSON.stringify(element)}
      > 
        {service.grouptype} - {element.name} 
      </option>
    ))
  )}
</select>

提交时使用完整属性 #

在按钮提交逻辑中，直接调用状态typeOfService即可获取包含所有属性的对象，示例：

const handleSubmit = () => {
  if (typeOfService) {
    // 可直接访问typeOfService.name、typeOfService.price、typeOfService.type等属性
    console.log('提交的完整服务信息:', typeOfService);
    // 执行后续提交逻辑
  }
};

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