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

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

// MyInput.jsximport { 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.jsxconst App = () => {    return <MyInput onChange={handleChange} />;};