[javascript] React에서 onChange와 onInput의 차이점은 무엇입니까?

실제 DOM 기반 change이벤트 를 수신하는 방법을 찾고있는이 문제를 우연히 발견 한 사람은 다음 과 같이합니다 (TypeScript로 작성).

import { Component, createElement, InputHTMLAttributes } from 'react';

export interface CustomInputProps {
    onChange?: (event: Event) => void;
    onInput?: (event: Event) => void;
}

/**
 * This component restores the 'onChange' and 'onInput' behavior of JavaScript.
 *
 * See:
 * - https://reactjs.org/docs/dom-elements.html#onchange
 * - https://github.com/facebook/react/issues/3964
 * - https://github.com/facebook/react/issues/9657
 * - https://github.com/facebook/react/issues/14857
 */
export class CustomInput extends Component<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'ref'> & CustomInputProps> {
    private readonly registerCallbacks  = (element: HTMLInputElement | null) => {
        if (element) {
            element.onchange = this.props.onChange ? this.props.onChange : null;
            element.oninput = this.props.onInput ? this.props.onInput : null;
        }
    };

    public render() {
        return <input ref={this.registerCallbacks} {...this.props} onChange={undefined} onInput={undefined} />;
    }
}

이 접근 방식을 개선하는 방법을 보거나 문제가 발생하면 알려주십시오. 달리가 blur의 change사용자 프레스는 입력 값이 실제로 변경 한 경우에만 트리거 될 때 이벤트는 트리거됩니다.

나는 여전히이 CustomInput구성 요소에 대한 경험을 얻고 있습니다 . 예를 들어 체크 박스가 이상하게 작동합니다. 값을 확인란에 전달하는 동안 처리기 event.target.checked에서 반전하거나 onChange값을 확인란에 checked전달할 때이 반전을 제거해야 defaultChecked하지만이 경우 페이지의 다른 위치에서 동일한 상태를 나타내는 여러 확인란이 동기화 상태로 유지됩니다. . (두 경우 모두 for 확인란에 onInput핸들러를 전달하지 않았습니다 CustomInput.)