如何使用React工具箱模糊React中的文本输入

Question

假设我有这样的组件：

export function ColorComponent ({color}: {color: TColor}) {
let textInputRef = useRef(null);
return (
<input
key={color.id}
ref={textInputRef}
type="text" value={color.text}
onKeyPress = {e => store.dispatch(colorTextKeyPressAction({colorId: color.id, e}))}
/>
);
}

减速器的情况是：

.addCase(a.colorTextKeyPress, (state, action) => {
let {colorId, e}  = action.payload;
if (e.key == 'Enter') {
e.currentTarget.blur();
doUsefulStuff(colorId);
}
})

如果我留下这样的代码，我会从react工具箱中得到一个错误："；在操作"中检测到不可序列化的值；。

不知道tookit为什么不喜欢操作中的不可序列化值——它无论如何都不会进入状态。

我可以重写组件事件处理程序，如：

onKeyPress = {e => store.dispatch(colorTextKeyPressAction({colorId: color.id, keyCode: e.key}))}

在操作中只传递一个字符串。只是无法调用e.currentTarget.blur()。

据我所知，我可以使用"；参考文献"；像上面的textInputRef一样，直接访问输入字段——但无论如何，我如何将该ref传递给reducer，wthout再次得到关于"的错误；不可序列化的值"；？

如果React有，我很乐意使用一些bool标志来控制输入的聚焦/模糊状态，但AFAIK没有。

Answer 1

我自己问题的可能答案。

我记得减速器的目的只是改变状态，而没有任何其他副作用，比如模糊。减少器和回调是不一样的。所以我只需要编写处理程序并调用blur((和里面的reducer。

export function ColorComponent ({color}: {color: TColor}) {
let keyPressHandler = ({colorId, e}: {colorId: number, e: React.KeyboardEvent<HTMLInputElement>}) => {
if (e.key == 'Enter') {
e.currentTarget.blur();
store.dispatch(colorTextKeyPressAction({colorId: color.id}));
}
};
return (
<input
key={color.id}
type="text" value={color.text}
onKeyPress = {e => keyPressHandler({colorId: color.id, e})}
/>
);
}

然后减速器变成简单的

.addCase(a.colorTextKeyPress, (state, action) => {
doUsefulStuff(state, action.payload.colorId);
})