javascript - useReducerを使用して反応制御入力を実装する方法は?

Question

useReducer私の目標は、フックを使用して React 制御の入力を実装することです。

レデューサー内では、現在の値とキャレット位置を取得するためにevent.target.valueandが必要です。そのため、アクションのとしてevent.target.selectionStartを送信することを考えました。eventpayloadON_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>
  );
}

入力された最初の文字には機能しますが、2番目に壊れます。

これはエラーです：

警告: この合成イベントは、パフォーマンス上の理由から再利用されます。targetこれが表示されている場合は、リリースされた/無効化された合成イベントでプロパティにアクセスしています。これは null に設定されます。元の合成イベントを維持する必要がある場合は、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
    }
  })
}