@ivan_ivanov_ivanych

Почему пропадает фокус с инпута при изменении состояние useState?

Есть таблица с тремя инпутами в строке.Есть функция, которая при change меняет состояние и значение инпута в таблице.
Проблема в том, что во всех первых инпутах (со значением from) после ввода 1 символа пропадает фокус.
Причем именно в первых. Второй и трутий инпут принимает значение без ограничений
Кусок кода инпутами:
data.map((item, index) => {
                return (
                 <CTableRow key={item.from}>
                    <CTableDataCell>
                      //Проблемный инпут  
                      <CFormInput defaultValue={item.from}
                          onChange={(e) => changeData(e, item.id, 'from')}
                          invalid={invalidItem === index}
                        />
                      
                    </CTableDataCell>
                    <CTableDataCell>
                          <CFormInput defaultValue={item.to}
                            onChange={(e) => changeData(e, item.id, 'to')}
                            invalid={invalidItem === index}
                          />
                    </CTableDataCell>
                    <CTableDataCell>
                          <CFormInput defaultValue={item.coefficient}
                            onChange={(e) => changeData(e, item.id, 'coefficient')}
                            />
                      }

                  </CTableRow>
              )})

и сама функция onChange:
const [data, setData] = useState([]);

  const changeData = (e, id, key) => {
    e.target.value = e.target.value.replace(/[^\d.]/g, '');
    const value = e.target.value;
    switch (key) {
      case 'from': {
        setData(data.map(item => {
          return item.id === id ? {...item, from: Number(value)} : item
        }))
        break
    // здесь пропадает фокус с элемента
      }
      case 'to': {
        setData(data.map(item => {
          return item.id === id ? {...item, to: Number(value)} : item
        }))
        break
      }
      case 'coefficient': {
        setData(data.map(item => {
          return item.id === id ? {...item, coefficient: Number(value)} : item
        }))
        break
      }
      default: console.log(key)
    }
  }
  • Вопрос задан
  • 392 просмотра
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
Когда печатаешь в первом инпуте, меняется item.from. А он у тебя используется как key для CTableRow. При изменении ключа компонент не обновляется, а перемонтируется (т.е. сносится полностью и создается заново). Возможно, ты хотел для key использовать item.id? тогда было бы норм.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы