材质UI TextField自定义属性 [英] Material UI TextField Custom Attribute

问题描述

我目前正在尝试为TextField组件设置自定义数据属性，例如:

I am currently trying to set a custom data attribute to a TextField component as such:

class TestTextField extends React.Component {
componentDidMount() {console.log(this._input)}
  render() {
    return (
      <TextField
        label="Label 1"
        InputProps={{placeholder: 'Input 1', 'data-state': 'Data State 1'}}
        margin="normal"
        inputRef={(elem) => {this._input = elem}}
      />
    )
  }
}

但是我无法显示data-state并显示控制台日志

However I can't get data-state to show up with the console log saying

 <textarea rows="1" class="MuiTextarea-textarea-67 MuiInput-input-56 MuiInput-inputMultiline-64" placeholder="Input 1" type="text">

TextField不支持自定义属性吗?我正在使用v1.0.0-beta.6( https://material-ui -1dab0.firebaseapp.com/api/text-field/)

Are custom attributes not supported for TextField? I am using v1.0.0-beta.6 (https://material-ui-1dab0.firebaseapp.com/api/text-field/)

推荐答案

如您所见，自定义道具为可能是inputProps 然后是向下传递到实际的 (默认情况下，InputComponent是"input")

As you can see custom props are passed to the FormControl component. What you want is probably inputProps which is then passed down to the actual <input /> (InputComponent is "input" by default)

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