下のようなコードで「全角入力→enter」すると onChange が 3回飛びます。
CodeSandbox にコードがあります ↓
https://codesandbox.io/s/nifty-sunset-49kyi2?file=/src/App.js:0-631
発生している問題・エラー
javascript
1import React, { useState } from "react"; 2 3const App = () => { 4 const [hoge, setHoge] = useState([]); 5 return <HogeComponent hoge={hoge} setHoge={setHoge} />; 6}; 7 8const HogeComponent = ({ hoge, setHoge }) => { 9 const [inputValue, setInputValue] = useState(""); 10 const handleChange = (e) => { 11 console.log(e.target.value); 12 setHoge((prev) => [...prev, e.target.value]); 13 setInputValue(e.target.value); 14 }; 15 return ( 16 <div> 17 <input value={inputValue} onChange={handleChange} /> 18 <ul> 19 {hoge.map((h, index) => { 20 return <li key={`hoge_${index}`}>{h}</li>; 21 })} 22 </ul> 23 </div> 24 ); 25}; 26 27export default App;
このフォームでフォームを全角入力するして「Enter」を押すと、3回 onChange が飛びます。
また、Windows だと 「Enter」の代わりに「左クリック」をしても 3回 onChange が飛びます。
console.log
1あ 2"" 3あ
console.log
1あああ 2ああ 3あああ
onChange が 3回飛ぶ理由に、onChange内の setState の State の値を、HogeComponent 自身が参照しているからなことがあります(下のコードの + から始まる行が関係しています)。
→ 該当するソースコード
javascript
1import React, { useState } from "react"; 2 3const App = () => { 4+ const [hoge, setHoge] = useState([]); 5+ return <HogeComponent hoge={hoge} setHoge={setHoge} />; 6}; 7 8+const HogeComponent = ({ hoge, setHoge }) => { 9 const [inputValue, setInputValue] = useState(""); 10 const handleChange = (e) => { 11 console.log(e.target.value); 12+ setHoge((prev) => [...prev, e.target.value]); 13 setInputValue(e.target.value); 14 }; 15 return ( 16 <div> 17 <input value={inputValue} onChange={handleChange} /> 18 <ul> 19 {hoge.map((h, index) => { 20 return <li key={`hoge_${index}`}>{h}</li>; 21 })} 22 </ul> 23 </div> 24 ); 25}; 26 27export default App;
ここで、なぜ3回も onChange が飛ぶのか説明できる方はいないでしょうか?
半角だと起きないので、composition などが関係するのでしょうか?
また、windows 環境での「全角入力→Enter」と「全角入力→左クリック」の入力方法の違いがわかる人はいるでしょうか?
どうぞよろしくお願いいたします。
あなたの回答
tips
プレビュー