javascript - Material-ui 文本字段在重新渲染后失去焦点。如何解决?
问题描述
我正在使用 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
解决方案
推荐阅读
- html - ::after 中的内容在 abaolutely 定位后不动
- reactjs - 如何使用反应在页面刷新时维护经过身份验证的用户状态
- hibernate - 找不到 hibernate 4.3 的 jboss-as-jpa jar
- r - 使用列后缀将数据从宽转长以获取具有多列值的表(使用 pivot_longer)
- postgresql - Postgres 和复制
- r - 从 GitHub 安装 RSelenium
- unit-testing - 通过 TeamCity 和 Octopus deploy 在部署服务器上运行 Performane Test
- conda - 在 conda install wget 之后 conda“没有名为 wget 的模块”
- git - hggit 不导出未合并的分支
- matlab - 初始目标函数评估失败。FSOLVE 无法继续