我的目标是使用useReducer
钩子实现React控制的输入。
在减速器内部,我需要event.target.value
和event.target.selectionStart
来获取当前值和插入符号位置。因此,我考虑过将event
作为payload
操作的ON_CHANGE
发送。
这是我正在尝试的:
https://codesandbox.io/s/optimistic-edison-xypvn
function reducer(state = "", action) {
console.log("From reducer... action.type: " + action.type);
switch (action.type) {
case "ON_CHANGE": {
const event = action.payload;
const caretPosition = event.target.selectionStart;
const newValue = event.target.value;
console.log("From reducer... event.target.value: " + event.target.value);
console.log(
"From reducer... event.target.selectionStart: " + caretPosition
);
return newValue;
}
default: {
return state;
}
}
}
export default function App() {
console.log("Rendering App...");
const [state, dispatch] = useReducer(reducer, "");
return (
<div className="App">
<input
value={state}
onChange={event => dispatch({ type: "ON_CHANGE", payload: event })}
/>
</div>
);
}
它适用于键入的第一个字母,但在第二个字母处中断。
这是错误:
警告:出于性能原因,此合成事件被重用。如果看到此消息,说明您正在访问已发布/无效的综合事件的属性
target
。设置为空。如果必须保留原始的合成事件,请使用event.persist()。有关更多信息,请参见react-event-pooling
。
我该怎么办?我需要在哪里打电话给event.persist()
。我应该在reducer
处理程序中执行此操作,还是需要在onChange()
处理程序内部将其作为参数发送之前执行此操作。
或者仅发送那些属性而不是发送完整的event
对象更好?
赞:
onChange={ event =>
dispatch({
type: "ON_CHANGE",
payload: {
value: event.target.value,
caretPosition: event.target.selectionStart
}
})
}
仅传递event.target.value
,因为错误提示,synthetic events不会持久。
function reducer(state = "", action) {
switch (action.type) {
case "ON_CHANGE": {
const newValue = action.payload;
return newValue;
}
default: {
return state;
}
}
}
export default function App() {
const [state, dispatch] = useReducer(reducer, "");
return (
<div className="App">
<input
value={state}
onChange={event =>
dispatch({ type: "ON_CHANGE", payload: event.target.value })
}
/>
</div>
);
}