Material-ui 文本字段在重新渲染后失去焦点。如何解决？答案

【问题标题】：Material-ui Textfield loosing focus after re-rendering. How to fix it?Material-ui 文本字段在重新渲染后失去焦点。如何解决？
【发布时间】：2021-11-08 11:55:39
【问题描述】：

我正在使用 Material-ui Textfield 来表示可重复的数组对象：

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 方法。每次我在 Textfield 中更改某些内容时，它都会失去焦点。我也在使用 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

【问题讨论】：

标签： javascript reactjs material-ui textfield

【解决方案1】：

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

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

这将解决您的问题

【讨论】：