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