材质UI表单输入的className属性 [英] Material UI form input's className property

问题描述

我正在关注本教程了解动态形式.它使用输入的className和自定义名称以及id属性.

I'm following this tutorial to learn about dynamic forms. It uses the input's className with a custom name and the id property.

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

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

To be able to do this in the function that handles changes:

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属性返回以下内容或类似内容:

I want to do the same form using Material UI, I've used TextField, Input and InputBase, the id property works but the className property return the following or similar:

"MuiInputBase-input MuiInput-input"

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

Is there any way to use the className property or another way to acheive the same thing?

推荐答案

我不确定为什么教程作者决定为此目的使用className.数据属性是更合适的用法(本教程已经使用data-id作为索引).您可以利用TextField的inputProps属性在输入上指定数据属性.

I'm not sure why the tutorial writer decided to use className for this purpose. Data attributes are a more appropriate thing to use (and the tutorial already uses data-id for the index). You can specify the data attributes on the input by leveraging the inputProps property of TextField.

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

Here is a working example showing this:

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";

function App() {
  const [state, setState] = React.useState({
    cats: [{ name: "cat1", age: "2" }, { name: "cat2", age: "5" }],
    owner: "Owner's Name"
  });
  const handleFormChange = e => {
    if (["name", "age"].includes(e.target.dataset.fieldType)) {
      const newCats = [...state.cats];
      newCats[e.target.dataset.id][e.target.dataset.fieldType] = e.target.value;
      setState({ ...state, cats: newCats });
    } else {
      setState({ ...state, [e.target.name]: e.target.value });
    }
  };
  return (
    <form onChange={handleFormChange}>
      <TextField label="Owner" value={state.owner} name="owner" />
      <br />
      <br />
      <TextField
        label="Name 1"
        value={state.cats[0].name}
        inputProps={{ "data-id": 0, "data-field-type": "name" }}
      />
      <TextField
        label="Age 1"
        value={state.cats[0].age}
        inputProps={{ "data-id": 0, "data-field-type": "age" }}
      />
      <br />
      <br />
      <TextField
        label="Name 2"
        value={state.cats[1].name}
        inputProps={{ "data-id": 1, "data-field-type": "name" }}
      />
      <TextField
        label="Age 2"
        value={state.cats[1].age}
        inputProps={{ "data-id": 1, "data-field-type": "age" }}
      />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

My example is hard-coded to two cats to keep it a little simpler, but the change-handling uses the same general approach as the tutorial and would work with a dynamic number of rows.

相关参考文献:

• https://developer.mozilla.org/en -US/docs/Learn/HTML/Howto/Use_data_attributes
• https://developer.mozilla.org/en -US/docs/Web/API/HTMLElement/数据集

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

这篇关于材质UI表单输入的className属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！