Материал-ui: SelectField внутренний фокус для MenuItem

Question

Я реализую SelectField с 30 вариантами в мобильное приложение. Все отлично работает, однако оно используется для ввода данных с быстрым огнем. Прямо сейчас я ограничен показом первых 10 или около того предметов из-за размера мобильного экрана.

В центре раскрывающегося списка я хотел бы сосредоточиться на элементе MenuItem среднего (примерно 15-го или около того), потому что наиболее выбранные элементы находятся вокруг середины списка. Без этого пользователь должен нажать &, прокручивая каждый раз в раскрывающемся списке для каждого ввода данных.

Есть ли способ сделать это легко?

Answer 1

Не думаю, что есть легко способ сделать это, но это можно сделать. Фактически вы можете установить пустой <MenuItem/> в своем поле выбора в середине выбранного списка, где вы хотите сфокусироваться, когда ваше приложение будет использоваться на мобильных устройствах. Пустое <MenuItem/> не будет отображаться в списке.

Затем вы должны использовать свойство onFocus, чтобы установить состояние на значение вашего пустого <MenuItem/>, когда <SelectField/> получает фокус. Это сделает поле выбора открытым для места в вашем списке, где пустой <MenuItem/>.

Возможно, вам захочется убедиться, что ваш пустой элемент имеет для него уникальное значение, а затем выполняет проверки проверки и т. Д. Вид взлома, но он работает. Надеюсь это поможет.

Мы можем использовать этот базовый пример для демонстрации (использует функции стрелок es6 fat arrow и модифицированы из документов MaterialUI).

constructor(props) { 
    super(props); 
    this.state = {value: null}; 
    } 

    handleChange = (event, index, value) => this.setState({value}); 

    handleFocus =() => { 
    if(//Do checks for screen size here, if mobile){ 
     this.setState({value: 9999}); 
    }  
    } 

    render() { 
    const items = [ 
     <MenuItem value={0} primaryText='1'/> 
     <MenuItem value={1} primaryText='2'/> 
     <MenuItem value={2} primaryText='3'/> 
     <MenuItem value={9999} /> 
     <MenuItem value={3} primaryText='4'/> 
     <MenuItem value={4} primaryText='5'/> 
    ]; 

    return (
     <SelectField maxHeight={300} value={this.state.value} onChange={this.handleChange} onFocus={() => this.handleFocus()}> 
     {items} 
     </SelectField> 
    ); 
    } 
}