时间戳

首页 > 解决方案 > 如何按字母顺序对下拉菜单项进行排序？

javascript - 如何按字母顺序对下拉菜单项进行排序？

问题描述

有没有办法在Material-UIoptions的下拉菜单中按字母顺序显示？

我知道数组可以简单地使用arr.sort(). 但是，如果我这样做const options = [...].sort()了，那么我仍然会在下拉菜单中看到未排序的值。

const options = [
  {label:"B",value:8033.86},
  {label:"A",value:483.93},
  {label:"Z",value:1246.3},
  {label:"C",value:145.0},
  {label:"E",value:244.5}
]

<Grid item xs={true}>
  <FormControl
      className={this.props.styles.formControl}
      margin="normal">
      <InputLabel shrink htmlFor="distanceTarget-label-placeholder">
          Target:
      </InputLabel>
      <Select
        onChange={(event) => this.props.handleChange("distanceTarget", event)}
        value={this.props.state.distanceTarget}
        input={<Input name="distanceTarget" id="distanceTarget-label-placeholder" />}
        displayEmpty="true"
        name="distanceTarget"
      >
      {options && options.length && options.map((option, i) => {
          return <MenuItem value={option.value} key={i}>{option.label}</MenuItem>
      })}
      </Select>
  </FormControl>
</Grid>

标签： javascriptreactjsmaterial-ui

解决方案

这是对对象数组进行排序的简单方法，您可以阅读文档

const options = [
  {label:"B",value:8033.86},
  {label:"A",value:483.93},
  {label:"Z",value:1246.3},
  {label:"C",value:145.0},
  {label:"E",value:244.5}
]

console.log(options.sort((a, b) => (a.label > b.label) ? 1 : -1))

推荐阅读