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。

有没有办法这样做？我希望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>

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

1 个答案: