絕地無雙
2022-08-18 10:40:45
我的目標是使用鉤子實現 React 控制的輸入。useReducer在減速器內部,我需要并獲取當前值和插入記號位置。所以我考慮過將 作為操作發送。event.target.valueevent.target.selectionStarteventpayloadON_CHANGE這就是我正在嘗試的:https://codesandbox.io/s/optimistic-edison-xypvnfunction 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> );}它適用于鍵入的第一個字母,但它在第二個字母中斷。這是錯誤:警告:出于性能原因,將重用此綜合事件。如果您看到此信息,則表示您正在訪問已發布/無效的綜合事件的屬性。此值設置為空。如果必須保留原始綜合事件,請使用 event.persist()。有關詳細信息,請參閱。targetreact-event-pooling我該怎么辦?我需要在哪里打電話。我應該在 上執行此操作,還是在處理程序中將其作為參數發送之前需要執行此操作。event.persist()reduceronChange()還是只發送這些屬性,而不是發送完整的對象更好?event喜歡:onChange={ event => dispatch({ type: "ON_CHANGE", payload: { value: event.target.value, caretPosition: event.target.selectionStart } })}
1 回答

倚天杖
TA貢獻1828條經驗 獲得超3個贊
只需傳遞,因為就像錯誤所說的那樣,合成事件不會持續存在。event.target.value
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>
);
}
添加回答
舉報
0/150
提交
取消