Question

我正在使用material-ui选择下拉菜单。我想将第一个选项设置为页面加载时选择的默认选项。但是，我找不到任何文档。

<Select

  open={open}
  className={classes.select}
  onClose={this.handleClose}
  onOpen={this.handleOpen}
  value={brand}
  onChange={event => this.handleChange(event)}
  name="brand"
  inputProps={inputProps}>

  {data.getBrands.map(brands => 
   <MenuItem key={brands.id} 
            value={brands.originalId} 
            id{brands.originalId}>{brands.name}
   </MenuItem>)}

</Select>

我希望首次加载页面时，下拉菜单包含默认值作为第一选项。

Answer 1

唯一的方法是在呈现data.getBrands组件之前将brand的第一个值分配给Select变量。像这样：

...
brand = data.getBrands.length > 0 ? data.getBrands[0].originalId : '';
...
<Select
  open={open}
  className={classes.select}
  onClose={this.handleClose}
  onOpen={this.handleOpen}
  value={brand} // this will select the first option after page load
  onChange={event => this.handleChange(event)}
  name="brand"
  inputProps={inputProps}>

  {data.getBrands.map(brands => 
   <MenuItem key={brands.id} 
            value={brands.originalId} 
            id{brands.originalId}>{brands.name}
   </MenuItem>)}
</Select>

如何在选择ui中添加第一个选项作为默认选项？

1 个答案: