Reactでinputの値を更新するたびにフォーカスが外れる

inputをonChangeで更新するとフォーカス外れる

超初歩的なミスなんですが、今まで何度かやってしまっています笑

自分がやってしまうのは、mapでリストをレンダーする際に、onChangeで更新するvalueをkeyの一部にしてしまっているパターンです。

誤った例

List.js

const List = props => {
 const [values, setValues] = useState([""]);

 const handleAdd = () => {
   //values増やす
 }

 const handleChange = (e, i) => {
   //indexのvalue更新
 }

 return (
   <div>
    //keyにonChangeで更新されるvalueを使っている
    {values.map((val, i) => <input key={val} onChange={e => handleChange(e, i)}>)}
    <button onClick={handleAdd}>add value</button>
   <div>
 )
}

フォーカス外れない例

とりあえず更新する値をkeyにしなければ大丈夫です。indexが変化しないリストであれば、indexをそのまま使っても大丈夫なはず？です。ただ無思考にindex使うのは良くなさそうです。

参考：React: using index as key for items in the list

List.js

const List = props => {
 const [values, setValues] = useState([""]);

 const handleAdd = () => {
   //values増やす
 }

 const handleChange = (e, i) => {
   //indexのvalue更新
 }

 return (
   <div>
    //keyにindexを使う
    {values.map((val, i) => <input key={i} onChange={e => handleChange(e, i)}>)}
    <button onClick={handleAdd}>add value</button>
   <div>
 )
}

結論

keyがinputで変更されないようにしましょう。

参考：React.js loses input focus on typing