如何按字母順序對下拉菜單項排序？

Question

在Material-UI的下拉菜單中，是否可以按字母順序顯示options ？

我知道可以使用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>

Answer 1

這是對對象數組進行排序的一種簡單方法，您可以閱讀文檔

 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)) 

Answer 2

Material-UI與樣式有關，而不是邏輯。 首先，您需要對選項進行排序。

    for (const item in options) {
     console.log(options[item].label)
    }

它的第一步。 第二，你應該嘗試一下。

Answer 3

在處理對象數組時，您需要告訴確定哪個決定首先出現：

function sortAlphabeticallyAscending(a,b){
    if(a.label < b.label) return -1;
    else if (a.label > b.label) return 1;
    else return 0;
}

options.sort(sortAlphabeticallyAscending);

基本上，如果要說a的索引小於b（即a排在前），則返回-1；如果要說b排在第一位，則返回1；如果不想更改順序，則返回0。

請參閱文檔中的compareFunction部分...

Answer 4

您必須定義排序邏輯，因為您的輸入數組是對象數組。

更多信息可以在這里找到

 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} ]; const objComparator = function(a, b) { if (a.label < b.label) { return -1; } if (a.label > b.label) { return 1; } return 0; }; options.sort(objComparator);