Блог

Я создал таблицу, когда пользователь загружает файл csv. Этот файл отправляется на серверную часть для обработки и возврата данных с префиксом: «ОШИБКА:», чтобы определить ошибки в моей таблице.

Поэтому, когда ячейка содержит слово » ОШИБКА:», эта ячейка будет выделена красным цветом и будет содержать ввод для исправления этой ошибки.

Это элемент Cells, который я отображаю в таблицу react, а также мое состояние:

 const initialHoverError = {  rowIndex: 0,  cellName: '',  errorMessage: ''  }  const [hoverError, setHoverError] = useState(initialHoverError)    const Cells = ({row}) =gt; useMemo(() =gt; { const { original } = row return row.cells.map(cell =gt; {  const { column } = cell  const { id: cellIndex } = column  const { rowIndex, cellName, errorMessage } = hoverError   const hasError = checkError(original[cellIndex])   return (  lt;Table.Td  {...cell.getCellProps()}  className={cn(styles.Cell, { [styles.HasError]: hasError })}  onMouseEnter={() =gt;  handleHoverError('active', row.id, cellIndex, original[cellIndex])  }  onMouseLeave={() =gt; handleHoverError()}  gt;  {hasError ? (  lt;divgt;  lt;Text  className={cn(styles.ErrorText, {  [styles.ErrorVisible]:  cellIndex === cellName amp;amp; row.id   1 === rowIndex   1  })}  gt;  {errorMessage}  lt;/Textgt;  lt;input  className={styles.ErrorInput}  onBlur={event =gt; handleErrorUpdate(event, cellIndex, row.id)}  /gt;  lt;/divgt;  ) : (  cell.render('Cell')  )}  lt;/Table.Tdgt;  ) }) }, [data])  

Это функция, которая позволяет мне наводить курсор на ячейки, содержащие ошибку, и отображать ее пользователю.

 const handleHoverError = (type, rowIndex, cellIndex, text) =gt; {  const hasError = checkError(text) if (type === 'active' amp;amp; hasError) {  setHoverError({  rowIndex,  cellName: cellIndex,  errorMessage: text.slice(6)  })  return } return setHoverError(initialHoverError) }  

Таким образом, проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда моя мышь покидает td(onMouseLeave), мое поле ввода теряет фокус и повторяется(очищается). Поэтому, когда я ввел что-то во ввод и мышь покидает элемент td, ввод остается пустым и не в фокусе.

И, наконец, вот как я обновляю свое поле ввода. Когда эта функция наведения удалена, все работает идеально.

 const handleErrorUpdate = (event, cellIndex, rowIndex) =gt; { event.preventDefault() const newData = [...data] if (event.target.value !== '')  newData[rowIndex][cellIndex] = event.target.value setData(newData) }  

Пожалуйста, дайте мне несколько советов.