Блог

Когда вы нажмете enter, будет создан новый файл, но проблема в том, что focus и фокус переместится на вновь созданный файл, но проблема в том, что его поле оставить an enter space in the previous `

 import React, { useState } from "react";
import "./styles.css";

export default function App() {
  let elements = [
    { id: 0, text: "first", autoFocus: true },
    { id: 1, text: "second", autoFocus: true },
    { id: 2, text: "third", autoFocus: true }
  ];
  const [state, setstate] = useState(elements);
  function handChange(e) {
    if (e.keyCode == 13) {
      const index = state.findIndex((item) => item.id == e.target.id);
      //i'm using autoFocus to move the focus  (I-beam pointer) to the nex field.
      //but i still get errors with it
      Object.assign(state, (state[index].autoFocus = false));

      setstate((pre) => {
        return [
          ...pre.slice(0, index   1),
          { id: 3, text: "xxx", autoFocus: true },
          ...pre.slice(index   1, state.length)
        ];
      });
      setTimeout(() => {
        document.getElementById(index   1).focus();
      }, 0);
    }
  }

  return (
    <div className="App">
      {state.map((e) => (
        <div contentEditable="true" id={e.id} onKeyUp={handChange}>
          {e.text}
        </div>
      ))}
    </div>
  );
}

  

в codesandbox

вот быстрый способ для этого, удалите все символы ввода из текста

  if (e.keyCode == 13) {
      const index = state.findIndex((item) => item.id == e.target.id);
    e.target.innerText = e.target.innerText.split('n').join('')
// the rest of your code here
}
  

Добавление preventDefault предотвратит возникновение события по умолчанию, в этом случае событие по умолчанию для enter ключа, которое создает новую строку, будет остановлено.

 if (e.keyCode == 13) {
  e.preventDefault(); //This should be at the top of the process.

  //....
}