【问题标题】:Material UI form input's className propertyMaterial UI 表单输入的 className 属性
【发布时间】:2019-07-16 10:56:59
【问题描述】:

我正在关注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 属性或其他方式来实现相同的目标?

【问题讨论】:

    标签: reactjs material-ui


    【解决方案1】:

    我不确定为什么教程作者决定为此使用className。数据属性更适合使用(并且本教程已经使用 data-id 作为索引)。您可以利用TextFieldinputProps 属性指定输入的数据属性。

    下面是一个工作示例:

    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);
    

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

    相关参考资料:

    【讨论】:

    • 谢谢,解释很清楚,示例代码真的很有帮助。
    • 我能再问你一个问题吗?如果我想使用 Select 组件(也具有 inputProps 属性)而不是 TextField,我该如何访问数据属性?它们是未定义的,我做了一个简单的代码框:codesandbox.io/s/dynamic-form-change-handler-with-select-ft4dj
    • 请为 Select 案例创建一个新问题。答案比我在评论中可以轻松传达的内容更复杂。
    • 好的,瑞恩。这是新问题stackoverflow.com/questions/57078495/…
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-16
    • 1970-01-01
    • 1970-01-01
    • 2014-01-11
    • 2020-11-04
    • 1970-01-01
    相关资源
    最近更新 更多