React / Recoilのinputで日本語が変換できない
Recoilで以下のようなコードを書いたところ、日本語変換できなくなりました。
Atomでクラスを扱うのが良くなかったのでしょうか。
なぜ変換できなくなってしまったのか知りたいです。
再現したCadeSandbox : https://codesandbox.io/s/react-playground-forked-dlq4e?file=/playground.js
playground.js
const Playground = () => {
const forms = useRecoilValue(formsAtom);
const change = useRecoilCallback(changeFormTextAtom);
return (
<div>
<input value={forms.a} onChange={(e) => change("a", e.target.value)} />
<input value={forms.b} onChange={(e) => change("b", e.target.value)} />
</div>
);
};
atom/forms.js
export const formsAtom = atom({
key: 'form',
default: new Forms()
})
callback/change-form-text.js
export const changeFormTextAtom = ({snapshot, set}) => async (key, text) => {
const forms = await snapshot.getPromise(formsAtom)
const newForm = forms.clone()
newForm[key] = text
set(formsAtom, newForm)
}
model/forms.js
export class Forms {
constructor(a, b) {
this.a = a ?? ''
this.b = b ?? ''
}
clone() {
return new Forms(this.a, this.b)
}
}
0