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 处理逻辑分离,展示了如何在状态更新后进行额外的操作。

相关推荐
Mintopia17 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52018 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖18 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia19 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
Carlos_sam21 分钟前
OpenLayers:封装Overlay的方法
前端·javascript
Json_23 分钟前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·javascript·vue.js
海底火旺24 分钟前
JavaScript中的“先有鸡还是先有蛋”——变量提升的奥秘
前端·javascript
the_flash25 分钟前
JS拖动的原理
前端·javascript
你的人类朋友26 分钟前
解释一下Node.js的『阻塞』现象,并回答:为什么会阻塞?什么情况下会阻塞?
javascript·后端·node.js
旧识君44 分钟前
前端图片压缩实战:基于compressorjs的高效解决方案
前端·javascript·vue.js