React 通过 change 改变把对象添加到数组中并提交

原创已于 2023-04-19 17:36:44 修改 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-04-19 17:33:02 首次发布

该文章描述了在React组件中如何使用map函数遍历列表渲染表格，并在Select组件的onChange事件中处理选择的值。通过useState管理状态，当选择变化时更新数据数组，确保每个选择项的唯一性。涉及到数组查找、替换和更新的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
          listData.map((item, index) =>
                  <TableTr key={index}>
                     <td><OrderStyle><div>{index + 1}</div></OrderStyle></td>
                     <td><OrderCenterStyle><div>{item.name}</div></OrderCenterStyle></td>
                     <td>
                         <Select
                               allowClear
                               style={{ width: 120 }}
                               onChange={(e) => onChange(e, item)}
                          >
                                {dropDownPersonData.map((item) => (
                                     <Option value={item.id} key={item.id}>
                                          {item.name}
                                      </Option>
                                   ))}
                           </Select>
                        </td>
                     </TableTr>)
}

代码:

const onChange = (e, item) => {
        let newPeopleId = [...peopleId];
        let parame = {
            variableGroup: peopleData.key, // 变量分组 流程部署key
            variableName: item.id,         // 变量名  id :"UserTask_1jd1y1z"
            variableValue: e,              // 变量值 下拉框id
        }
        if (newPeopleId.length > 0) {
            let show = newPeopleId.findIndex(element => element.variableName === item.id)
            console.log(show);
            if (show === -1) {
                newPeopleId.push(
                    parame
                )
            } else {
                newPeopleId[show] = parame
            }
            setPeopleId([...newPeopleId]);
        } else {
            setPeopleId([parame])
        }
    }

步骤:

1. 使用 useState 初始一个数据, 在 onChange 改变的时候获取下拉框的 id 以及传过来的当前列表项的 id;

2. 声明一个新数组来替 useState 声明的数组变量把所需要的数据放到参数对象中;

3. 判断新数组中是否有数据, 没有数据就把之前声明的参数对象数据直接放到 useState 数组中;

4. 如果新数组中有数据, 使用 findIndex 方法判断当前选择的id 是否等于新数组存的id,

如果等于就标识有这条数据就把当前选择的数据对象赋值给新数组[下标]这条数据对象

如果不等于标识没有这条数据就向新数组中添加这条数据对象

5. 最后解构赋值给 useState 生命的数组即可