在反应输入元素中以编程方式触发输入 onChange 事件答案

【问题标题】：Trigger input onChange event programmatically in react input element在反应输入元素中以编程方式触发输入 onChange 事件
【发布时间】：2022-11-12 13:07:34
【问题描述】：

我有许多按钮，我想单击并根据这些按钮值设置输入字段的值。我正在使用以 onChange 作为模式的反应钩子表单，但由于输入没有获得 onChange 事件，我希望能够以编程方式触发输入 onChange 事件，因此反应钩子表单通过其 onChange 模式更新。

在下面的示例中，当我调用 onManualChange 并向其传递一个值时，它不会调度输入 onChange 事件？下面的电流是对反应输入元素的引用。

  const {
    register,
    setValue,
  } = useForm({
    mode: 'onChange',
  })


   const onManualChange= (value: number) => {
      const event = new Event('input', { bubbles: true, cancelable: true })
      setValue(current.name, value))
      current?.dispatchEvent(event)
   }

【问题讨论】：

标签： reactjs react-hook-form

【解决方案1】：

React 使用合成事件，您无法使用 dispatch 发出这些事件。据我所知，他们不会公开 API 以编程方式发出它们。你可以只添加一个原生监听器而不是使用 React 的事件。你可以为它做一个小钩子：

/** @returns [ref object, event emitter] */
export default function useEvent<T extends HTMLElement>(
  name: string,
  callback: (e: Event) => any
): [MutableRefObject<T | null>, () => void] {
  const ref = useRef<T | null>(null);

  useEffect(() => {
    ref.current?.addEventListener(name, callback);
    return () => ref.current?.removeEventListener(name, callback);
  }, [ref.current, name, callback]);
  
  return [ref, () => ref.current?.dispatchEvent(new Event(name))];
}

用法：

  const [inputRef, emitEvent] = useEvent<HTMLInputElement>('customEvent', (e) =>
    console.log('Event fired', e, e.target)
  );

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={emitEvent}>EMIT</button>
    </div>
  );

示例：https://stackblitz.com/edit/react-ts-ay2m4z?file=App.tsx

【讨论】：

返回 ref 时，我在 typescript 中收到此错误：Type 'MutableRefObject<T | undefined>' 不可分配给类型 'MutableRefObject<T>'。键入'T | undefined' 不可分配给类型 'T'。 'T' 可以用与 'T | 无关的任意类型实例化。不明确的'。
是的，打字稿严格模式会捕捉到这一点 - 引用一开始是未定义的，所以你应该检查它。我编辑了我的答案以将 ref 实例化为 null。我做到了，所以如果 ref 仍然为空，即不会发生任何事情。你忘了把它附加到一个元素上——你可能会抛出一个错误来让自己知道。