如何使用useReducer实现反应控制输入?

问题描述 投票:0回答:1

我的目标是使用useReducer钩子实现React控制的输入。

在减速器内部,我需要event.target.valueevent.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
    }
  })
}
javascript reactjs input react-hooks use-reducer
1个回答
0
投票

仅传递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>
  );
}

Edit naughty-wind-egone

© www.soinside.com 2019 - 2024. All rights reserved.