亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 useReducer 實現 react 控制的輸入?

如何使用 useReducer 實現 react 控制的輸入?

絕地無雙 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>

  );

}


查看完整回答
反對 回復 2022-08-18
  • 1 回答
  • 0 關注
  • 111 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號