陣營材料UI SelectField菜單項未出現

使用材料的UI 0.15.1，15.2.0做出反應。當我在SelectField下拉點擊我得到了菜單選項出現出現一個空的下拉列表。當我在SelectField中使用硬編碼的MenuItems時，我看到完整的菜單沒有問題。陣營材料UI SelectField菜單項未出現

這似乎並非是一個injectTapEventPlugin因爲我導入它，把它。我的代碼如下：

render() { 
var divStyle = { 
    fontSize: 16 
}; 

var mymenuItems = [ 
{ payload: '1', text: 'one' }, 
{ payload: '2', text: 'two' }, 
{ payload: '3', text: 'three' }, 
{ payload: '4', text: 'four' }, 
{ payload: '5', text: 'five' }, 
]; 


return (
    <div style={divStyle}> 
    <SelectField 
     value={this.state.selected} 
     onChange={this._onSelect} 
     floatingLabelText="Product" 
     menuItems={mymenuItems}> 
    </SelectField>  
    </div> 

)

}

我也得到一個

警告：未知道具onItemTouchTap，disableAutoFocus， onEscKeyDown上的標籤。從元素

在控制檯中刪除這些道具，當我點擊SelectField但我看到別人有，由於新的陣營版本，它和它的出現讓人覺得它應該不會影響我的代碼（雖然它是非常相似的問題煩人）

來源

2016-07-06 Aharon Haber

不知道爲什麼你使用的是menuItems，這個屬性是舊材料的UI版本。

但它的簡單修復 - 根據您的代碼，你可以通過陣圖，並返回MenuItem元素.. 例子：

<SelectField 
    value={this.state.selected} 
    onChange={this._onSelect} 
    floatingLabelText="Product"> 

    {mymenuItems.map(x => <MenuItem key={x.payload} value={x.payload} primaryText={x.text} />)} 
</SelectField>

我建議你去檢查材料 - 實例UI文檔 http://www.material-ui.com/#/components/select-field

來源

2016-07-06 18:36:37

謝謝安德烈。我沒有看到文檔中的一個動態數組示例（長示例），我更喜歡舊方法，而不是將編碼嵌入到數組中。現在看來，我可以得到在回調中選擇的項目文本的唯一方式是這樣的：var itemSelected = this.state.myMenuOptions [index] .props.primaryText。它是否正確？除非我把另一個數組沒有它內嵌（陣列具有> 250項） –

@AharonHaber如果你作爲例子不幸是的..但我建議你保持你的對象數組，並通過它在'render'地圖編碼正如我在我的例子做了..如果 –

@AharonHaber你認爲這是正確的答案，我建議你將其標記爲正確的，所以其他人可以看到，這個問題已經回答了。 –

嘗試把這個在你的身材：

var injectTapEventPlugin = require("react-tap-event-plugin"); 
injectTapEventPlugin();

製作確保該函數在您將任何內容呈現給頁面之前運行。

參考：https://github.com/callemall/material-ui/issues/1011

來源

2017-04-20 15:26:03

陣營材料UI SelectField菜單項未出現

回答

相關問題