第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如何使用 useReducer 實現(xiàn) react 控制的輸入?

如何使用 useReducer 實現(xiàn) react 控制的輸入?

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

1 回答

?
倚天杖

TA貢獻1828條經(jīng)驗 獲得超3個贊

只需傳遞,因為就像錯誤所說的那樣,合成事件不會持續(xù)存在。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>

  );

}


查看完整回答
反對 回復(fù) 2022-08-18
  • 1 回答
  • 0 關(guān)注
  • 116 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號