Javascript 物料UI文本字段-将onChange应用于特定文本字段

我创建了一个函数，该函数通过对象数组“映射”，并使用该信息创建material ui TextField元素。 当用户输入的字符超过maxLength时，我试图输出错误消息。 我只想通过“onChange”显示用户当前正在使用的文本字段的错误消息。但是，它将应用于页面上的所有文本字段。 你能帮我解决这个问题吗

以下是我的两项职能：

这是displayCustomFields函数，它通过对象数组“映射”并将该信息用于TextField元素

displayCustomFields（）{
const{meteredConsumptionForm}=this.props.meteredConsumptionForm；
if（Object.keys（meteredConsumptionForm）.length>0）{
const customFields=meteredConsumptionForm.customFields；
让customFieldPlaceholder=''；
返回(
Object.keys（customFields）.map（（键，索引）=>{
const customFieldItem=customFields[key]；
返回(
);
})
);
}
}

您只检查一个id，即“metered form textfield desc”，因此所有文本字段都具有相同的id

const el = document.getElementById('metered-form-textfield-desc');

您可以尝试添加key的值，即index（我假设这将使所有texfields唯一）。感谢@Ted更正id的值

 id={"metered-form-textfield-desc "+index} 

并通过将索引传递给handleTextChange（index）方法并将其附加到

const el = document.getElementById('metered-form-textfield-desc '+index);

---

您只检查一个id，即“metered form textfield desc”，因此所有文本字段都具有相同的id

const el = document.getElementById('metered-form-textfield-desc');

您可以尝试添加key的值，即index（我假设这将使所有texfields唯一）。感谢@Ted更正id的值

 id={"metered-form-textfield-desc "+index} 

并通过将索引传递给handleTextChange（index）方法并将其附加到

const el = document.getElementById('metered-form-textfield-desc '+index);

---

您可以将处理程序更改为：

onChange={（e）=>this.handleTextChange（e）}

在处理程序中：

handleTextChange = (e) => {
    const el = e.target;

这将获得当前正在更改的元素，而无需通过

id

---

无论您选择哪条路线，都需要确保为它们提供唯一的

id

。

您可以将处理程序更改为：

onChange={（e）=>this.handleTextChange（e）}

在处理程序中：

handleTextChange = (e) => {
    const el = e.target;

这将获得当前正在更改的元素，而无需通过

id

---

无论你走哪条路，你都需要确保给他们唯一的

id

。

更好的方法是

id={`计量表单textfield desc-${index}}}

，或者至少应该是

id={`计量表单textfield desc-“+index}

@Ted哦，谢谢，我忘了它的反应了，哈哈，我的错了。再次感谢你这么说。是的，我想：）最好是

id={`metered form textfield desc-${index}}}

，或者至少应该是

id={”metered form textfield desc-“+index}

@Ted哦，谢谢我忘了它的反应了，哈哈，我的错。再次感谢你这么说。是的，我想：）