ReactJS + Redux：如何使用 Material-UI 的 RaisedButton 作为 <input/>？答案

【问题标题】：ReactJS + Redux: How to use Material-UI's RaisedButton as <input/>?ReactJS + Redux：如何使用 Material-UI 的 RaisedButton 作为 <input/>？
【发布时间】：2016-12-04 17:32:03
【问题描述】：

我想将 Material-UI 的 RaisedButton (http://www.material-ui.com/#/components/raised-button) 用作 <input/>，所以我尝试了以下操作：

      <RaisedButton
        containerElement={<input type="file" onChange={this._handleImageChange}/>}
        label="Upload Image"
        labelColor='#88898C'
        labelStyle={{textTransform:'intial'}}
        backgroundColor='#1C1C1F'
      />

但我收到一个错误Invariant Violation: input is a void element tag and must not have "children" or use "props.dangerouslySetInnerHTML". Check the render method。

有没有办法做到这一点？我希望 RaisedButton 的行为类似于 <input type="file" onChange={this._handleImageChange}/>

提前谢谢你！

【问题讨论】：

您认为containerElement 应该做什么？我在文档中找不到它。
好的，看来containerElement 是包含按钮的元素。将input 放在那里是为了什么？您是否尝试使用 RaisedButton 进行文件上传？
@DavinTryon 是的，这正是我想做的！

标签： javascript html reactjs redux

【解决方案1】：

“containerElement”的值将是包含您的按钮的元素（换句话说，按钮的父级或包装器）。 HTML 输入不允许包含任何其他元素，因此会出现错误。

将您的输入作为按钮的子项：

<RaisedButton label="Upload Image"
              labelColor='#88898C'
              labelStyle={{textTransform:'intial'}}
              backgroundColor='#1C1C1F'>
  <input type="file" onChange={this._handleImageChange}/>
</RaisedButton>

【讨论】：