React Material UI，如何进行移动友好选择？

Question

我正在开展React项目，我正在使用Material UI。

版本：

├─ react@15.6.1
├─ material-ui@0.19.4

我的代码中有一个使用Select Field组件的组件。

我的代码看起来像这样：

<SelectField some_props>
    {some_list.map(() => {return <MenuItem other_props/>})}
</SelectField>

在桌面上，这看起来非常好。但是，我想获得原生移动选择。滚动的。

基本上，这个：

如何使用Material UI获得适合移动设备的滚动选择？

谢谢！

Answer 1

这是使用react-device-detect的示例组件。如果用户为isMobile，则呈现本机选择/选项。

import React from 'react';
import {isMobile} from 'react-device-detect';

import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

const ExampleSelect = () => {

    const value = null;
    const onChange = (e) => console.log(e.target.value);
    const options = [
        {value: 1, label: 'Option 1'},
        {value: 2, label: 'Option 2'},
        {value: 3, label: 'Option 3'}
    ];

    return (

        <FormControl>
            <InputLabel>
                Options
            </InputLabel>
            <Select
                native={isMobile}
                value={value}
                onChange={onChange}
            >
                {options.map(option => (
                    isMobile ? (
                        <option key={option.value} value={option.value}>{option.label}</option>
                    ) : (
                        <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>
                    )
                ))}
            </Select>
        </FormControl>

    )
}    

export default ExampleSelect;