Question

我正在关注this tutorial，以了解动态表格。它使用输入的className和自定义名称以及id属性。

<input
  type="text"
  name={ageId}
  data-id={idx}
  id={ageId}
  value={cats[idx].age} 
  className="age" <-----------------------
/>

要能够在处理更改的功能中做到这一点：

handleChange = (e) => {
....
if (["name", "age"].includes(e.target.className) ) {
      let cats = [...this.state.cats]
      cats[e.target.dataset.id][e.target.className] = e.target.value.toUpperCase()
....
}

我想使用Material UI执行相同的表单，我使用了TextField，Input和InputBase，id属性起作用，但是className属性返回以下内容或类似内容：

"MuiInputBase-input MuiInput-input"

是否可以使用className属性或另一种方法来实现同一目的？

Answer 1

我不确定为什么教程作者决定为此目的使用className。数据属性是更适合使用的东西（本教程已经使用data-id作为索引）。您可以利用inputProps的{{1}}属性在输入中指定数据属性。

下面是一个工作示例，显示了这一点：

TextField

我的示例被硬编码为两只猫，以使其更简单一些，但是更改处理使用与教程相同的通用方法，并且可以处理动态行数。

材质UI表单输入的className属性

1 个答案: