React.js - 如何在不创建输入空间（段落空间）的情况下点击输入？

Question

当您点击输入时，将创建一个新字段，但问题是 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

Answer 1

焦点属性不适用于div 元素。

您应该在 React 中使用带有 autoFocus 属性的 input 元素。

<input autoFocus={e.autoFocus} value={e.text} id={e.id} onKeyUp={handChange}/>

Answer 2

尝试克隆状态，然后通过更新 autoFocus 和 text 属性对其进行映射：

 function handChange(e) {
    if (e.keyCode === 13) {
      let _state = [...state];

      setstate(
        _state.map((item) => {
          if (+e.target.id === +item.id) {
            return {
              ...item,
              autoFocus: false
            };
          } else if (+e.target.id + 1 === +item.id + 1) {
            return {
              ...item,
              autoFocus: true,
              text: "xxx"
            };
          } else {
            return item;
          }
        })
      );
    }
  }

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