React

by leopoldthecuber

HTML

<div id="app"></div>

CSS

#app {
  padding: 20px;
}

React

/* Bug 复现步骤：
1. 使用 Firefox
2. 在输入框中输入中文，按下空格试图输出输入法的第一个候选词
3. 候选词没有进入输入框 */

/* 备注：
将第 15 行或第 18 行注释掉，或将第 18 行放入 setTimeout 中均能让 bug 消失，原因未知 */
const Input = () => {
  const [value, setValue] = React.useState('');
  const [, setInComposition] = React.useState(false);
  const onChange = (e) => {
    setValue(e.target.value);
  }
  const onCompositionStart = () => {
    setInComposition(true);
  };
  const onCompositionEnd = (e) => {
    setInComposition(false);
  };
  return (
    <input
      type="text"
      value={value}
      onChange={onChange}
      onCompositionStart={onCompositionStart}
      onCompositionEnd={onCompositionEnd}
    />
  )
}

ReactDOM.render(<Input />, document.querySelector("#app"))