Элементы меню UI SelectField недействительны.

Использование Material-UI 0.15.1, React 15.2.0 Когда я нажимаю на раскрывающееся меню SelectField, я получаю пустое раскрывающееся меню, отображающееся без выбора пунктов меню. Когда я использую hardcoded MenuItems в SelectField, я вижу полное меню без проблем.Элементы меню UI SelectField недействительны.

Это не файл injectionTapEventPlugin, поскольку я его импортирую и вызываю. Мой код ниже:

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>

Я предлагаю вам проверить примеры на материало- пользовательский интерфейс Docs 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» , как это было в моем примере. –

@ Ахарон Хабер, если вы считаете, что это правильный ответ, я предлагаю вам отметить его как правильный, чтобы другие могли видеть, что на этот вопрос уже был дан ответ. –

Попробуйте положить это в вашей сборке:

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

Убедитесь, что функция запущена, прежде чем отображать что-либо на страницу.

Ссылка: https://github.com/callemall/material-ui/issues/1011

источник

2017-04-20 15:26:03

Элементы меню UI SelectField недействительны.

ответ

Смежные вопросы