javascript - ReactJS + Redux : How to use Material-UI's RaisedButton as <input/>?

Question

我想使用 Material-UI 的 RaishedButton ( 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 .

有办法吗？我希望 RaisingButton 的行为类似于 <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>