关于react.js:react-input-输入中文拼音和onChange事件的交互

需要：封装MyInput组件，输出拼音过程不触发onChange，拼音输入完结才触发onChange
原理：输出拼音过程触发composition事件，英文/数字输出不触发，而onChange两者都触发，用一个锁管制onChange的机会
问题：无奈做到MyInput只向外裸露onChange事件，且使得MyInput受控

// MyInput.jsx

import { PureComponent } from "react";

class MyInput extends PureComponent {
    constructor(p) {
        super(p);

        this.state = {
            input: "",
        };

        this.lock = false;
    }

    handleCompositionStart = () => (this.lock = true);

    handleCompositionEnd = (e) => {
        const { onChange } = this.props;
        let input = e.target.value;
        this.lock = false;
        onChange(input);

        this.setState({
            input,
        });
    };

    handleChange = (e) => {
        const { onChange } = this.props;
        let input = e.target.value;
        this.setState({
            input,
        });

        if (!this.lock) {
            onChange(input);
        }
    };

    render() {
        const { input } = this.state;

        return (
            <input
                value={input}
                onCompositionStart={this.handleCompositionStart}
                onCompositionEnd={this.handleCompositionEnd}
                onChange={this.handleChange}
            />
        );
    }
}

应用：

// App.jsx
const App = () => {
    return <MyInput onChange={handleChange} />;
};