Material-ui 文本域在重新呈现后失去焦点。如何解决？

Question

我正在使用 Material-ui 文本字段来表示可重复数组对象：

const [sections, setSections] = useState([
    {
      Title: "Introduction",
      Text: ""
    },
    {
      Title: "Relationship",
      Text: ""
    },
    {
      Title: "Monitoring",
      Text: ""
    }
  ]);

我正在使用 .map 函数渲染这些部分。问题是我在我的文本字段中使用：

 <TextField
              value={el.Title}
              onChange={(event) => {
                el = { ...el, Title: event.target.value };
                sections[ind] = el;
                console.log(sections);
                return setSections([...sections]);
              }}
              variant="outlined"
              label={`Section ${ind + 1}`}
              style={{ margin: "auto" }}
            />

这个 onChange 方法。每次我更改文本字段中的某些内容时，它都会失去焦点。我也在使用 TextareaAutosize 和 onChange 的相同方法：

<TextareaAutosize
              label="Message"
              variant="outlined"
              placeholder="Write here..."
              value={el.Text}
              onChange={(event) => {
                el = { ...el, Text: event.target.value };
                sections[ind] = el;
                console.log(sections);

                return setSections([...sections]);
              }}
              className={classes.messageStyle}
              style={{ width: "70%", marginLeft: "2.5%" }}
              minRows={5}
            />

但在这里我并没有失去注意力，一切都很好。我发现失去焦点是在设置新状态后重新渲染这些部分的结果。这意味着 TextField 被假定为新组件，这就是我失去焦点的原因。问题是为什么使用 TextareaAutosize 我没有遇到这个问题以及如何为 TextField 修复它？

这是沙盒：

https://codesandbox.io/s/ancient-worker-td4bm?file=/src/App.js:1023-1239

Answer 1

问题在这里，在每次渲染（标题更改）时，此键都会更改，并且 React 会将其视为一个新元素，因此它会删除该框中以前的文本内容并呈现新内容，依此类推标题更改反应正在加载新文本字段，这就是您失去焦点的原因。

  {sections.map((el, ind) => (
        <Box
          key={ind}
          style={{
            width: "90%",
            margin: "0 auto"
          }}

这将解决您的问题

Material-ui 文本域在重新呈现后失去焦点。如何解决？

Material-ui Textfield loosing focus after re-rendering. How to fix it?

javascript

textfield

reactjs

material-ui