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

Question

我想使用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 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}/>

先感谢您！

Answer 1

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

将输入内容作为按钮的子项：

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