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

Question

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

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

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

Answer 1

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

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

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

Мы можем использовать этот базовый пример для демонстрации (использует функции жирной стрелки es6 и модифицировано из документации 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>
    );
  }
}