Question

我正在使用材料Ui框架在reactjs中构建多页表单。我为每个页面创建了不同的组件。现在，我必须在单击按钮时添加动态Textfield。我可以添加文本字段，但是当我尝试更改字段的值时会出现问题。

handleChangeDynamic = (e) => {
        console.log(e.target.className)
        if(["vid", "vst", "vet"].includes(e.target.className)){
            console.log("in if")
            let v = [...this.state.v]
            v[e.target.dataset.id][e.target.className] = e.target.value.toUpperCase();
            this.setState({ v }, () => console.log(this.state.v))
        }
        else
        {
            console.log("in else")
            this.setState({[e.target.name] : e.target.value.toUpperCase()})
        }
    };

这是处理动态字段更改的代码。它使用'className'属性来确定该字段是否为动态字段。

                       <TextField
                        className="vst"
                        label="Alarm clock"
                        type="time"
                        defaultValue= "00:00"
                        variant = "outlined"
                        style = {{width : 300}}
                        name = {vstId}
                        data-id={index}
                        id={vstId}
                        value={v[index].name}
                      />

我正在使用此材料Ui文本字段。但是，它不是将className检测为“ vst”，而是采用Mui Textfield的className并进入handleDynamicChange方法的else部分。我该如何解决？我不希望将更改为正常。还有其他办法吗？请帮忙。这很重要。

Answer 1

可以通过使用inputProps组件的TextField属性为MUI文本字段提供类名。

喜欢-

<TextField
      id="sample"
      label="Sample Text Field"
      inputProps={{ className: "test" }}
    />

这会将test作为附加的className与MuiInputBase-input MuiInput-input一起添加到组件。

如何更改材质用户界面文本字段的默认className？

1 个答案: