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

我想用材料的UI的RaisedButton（http://www.material-ui.com/#/components/raised-button）爲<input/>，所以我嘗試了以下內容：ReactJS + Redux：如何使用Material-UI的RaisedButton作爲<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}/>

那樣行動提前謝謝！

來源

2016-07-29 Jo Ko

你覺得什麼'containerElement'應該做的事？我無法在文檔中找到它。 –

好吧，看起來'containerElement'是將包含按鈕的元素。你在把輸入放在那裏試圖做什麼？你想用'RaisedButton'做文件上傳嗎？ –

@DavinTryon Yup這正是我想要做的！ –

「containerElement」的值將是包含您的按鈕（換句話說，按鈕的父級或包裝）的元素。 HTML輸入不允許包含任何其他元素，因此是錯誤。

把你的輸入作爲按鈕的孩子：

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

來源

2016-07-30 02:38:54 chardy

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

回答

相關問題