Material UI TextField 自定义属性答案

【问题标题】：Material UI TextField Custom AttributeMaterial UI TextField 自定义属性
【发布时间】：2017-08-24 12:48:23
【问题描述】：

我目前正在尝试将自定义数据属性设置为 TextField 组件：

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 显示控制台日志并显示

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

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

如果其他人没有注意到，@pier-paolo-ramon 说使用 inputProps 属性而不是 InputProps 属性。注意区分大小写。

<TextField
  inputProps={{placeholder: 'Input 1', 'data-state': 'Data State 1'}}
/>

【讨论】：

【解决方案2】：

如您所见，自定义道具是passed to the FormControl component。你想要什么is probably inputProps，然后是passed down to the actual <input />（InputComponent 默认是"input"）

【讨论】：

当我无法在标记中查看数据属性时，我就像疯了一样，这篇文章让我小菜一碟..