react input 输入中文拼音和onChange事件的交互

Posted 2021-09-14 gauzung

需求：封装Input组件，输入拼音过程不触发onChange，拼音输入结束才触发onChange
原理：输入拼音过程触发composition事件，英文/数字输入不触发，而onChange两者都触发，用一个锁控制onChange的时机
问题：无法做到MyInput只向外暴露onChange事件，且使得MyInput受控
解决受控问题参考：react根据中文获取拼音_解决 React 中的 input 输入框在中文输入法下的 bug

Input组件：

// MyInput.jsx

import { Component } from "react";

class Input extends Component {
    constructor(p) {
        super(p);

        this.lock = false;
    }

    componentDidMount() {
        this.setInputValue();
    }

    componentDidUpdate(pp) {
        if (this.props.value !== pp.value) {
            this.setInputValue();
        }
    }

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

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

    setInputValue = () => {
        const { value } = this.props;
        this.refs.input.value = value;
    };

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

        // onChange(input);
    };

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

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

    render() {
        return (
            <input
                ref="input"
                onCompositionStart={this.handleCompositionStart}
                onCompositionUpdate={this.handleCompositionUpdate}
                onCompositionEnd={this.handleCompositionEnd}
                onChange={this.handleChange}
            />
        );
    }
}

export default Input;

使用：

// App.jsx
const App = () => {
    const [input, setValue] = useState("");
    
    return <MyInput onChange={handleChange} value={input}/>;
};