react通过onChange传输select的value数据

js 复制代码
     <Select
        label="Target parking space"
        checkIconPosition="right"
        placeholder="choose a parking space"
        value={targetParkingSpace}
        searchable
        onChange={store.getState().setTargetParkingSpace}
        data={parkingSpaceTrackIdList}
      />
      <Select
js 复制代码
setTargetParkingSpace: (id) => {
        Subjects.TargetParkingSlotChanged.next({
          prev: get().simulationSettings.target_parking_space_id,
          next: id,
        });
        set(
          produce((state) => {
            state.simulationSettings.target_parking_space_id = id;
          })
        );
      },

当 Select 组件的选项变更时,如果组件本身就是设计为直接传递新的值(在这种情况下是选定的车位 ID)给 onChange 回调函数,那么便不需要从事件对象中提取该值。在你的代码中,store.getState().setTargetParkingSpace 准备好接收该 ID,并且被用作 onChange 的回调。

复制代码
<Select
  ...
  onChange={store.getState().setTargetParkingSpace}
  ...
/>

在这种情况下,Select 组件内部会直接调用 store.getState().setTargetParkingSpace 并传递选定的 ID 作为参数。因此,即使没有明确地写出 (value) => ... 这样的箭头函数,onChange 事件也能够成功工作并且传递 ID。

这种行为意味着 Select 组件的实现方式是预期其 onChange 属性将一个值传递给回调函数,而不是传递一个完整的事件对象。这在一些UI库中很常见,尤其是那些旨在简化表单处理的库。

代码示例中的剩余部分提供了关于如何使用 produce 函数(来自Immer库)更新状态以及通过 RxJS Subject 发送通知的方法。这部分与直接的 onChange 处理逻辑分离,展示了如何在状态更新后进行额外的操作。

相关推荐
爱怪笑的小杰杰8 分钟前
Cesium中的倒立四棱锥:从几何结构到交互式3D可视化
javascript·3d·arcgis·1024程序员节
不会算法的小灰36 分钟前
JavaScript基础详解
开发语言·javascript·udp
十一吖i5 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
徐同保6 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
生莫甲鲁浪戴7 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
细节控菜鸡9 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
拉不动的猪10 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子10 小时前
nextTick的使用
前端·javascript·vue.js
Devil枫12 小时前
HarmonyOS鸿蒙应用:仓颉语言与JavaScript核心差异深度解析
开发语言·javascript·ecmascript
惺忪979812 小时前
回调函数的概念
开发语言·前端·javascript