材质UI TextField自定义属性

问题描述

我目前正在尝试为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/)

推荐答案

如您所见，自定义道具为传递给 FormControl 组件.您想要的可能是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自定义属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！