Question

我很难选择这个选项。 displayEmpty道具似乎有一个错误。我尝试了以下操作，但是当value === ""

时，标签始终覆盖输入内容

        <FormControl>
          <InputLabel htmlFor="profile-select">Profile</InputLabel>
          <Select
            value={values.accessProfile}
            onChange={handleChange("accessProfile")}
            input={<Input id="profile-select" />}
            displayEmpty
          >
            <MenuItem value={""}>None</MenuItem>
            {profiles.map(profile => (
              <MenuItem value={profile.id}>{profile.name}</MenuItem>
            ))}
          </Select>
        </FormControl>

Answer 1

对于displayEmpty，根据Material-UI docs：In order to display a meaningful value, a function should be passed to the renderValue prop which returns the value to be displayed when no items are selected.

因此，您需要传递一个函数，当没有选择任何项目时，该函数将返回要渲染的值，例如：

      <FormControl>
          <InputLabel htmlFor="profile-select">Profile</InputLabel>
          <Select
            value={values.accessProfile}
            onChange={handleChange("accessProfile")}
            input={<Input id="profile-select" />}
            displayEmpty
            renderValue={() => <MenuItem value={""}>None</MenuItem> }
          >
            {profiles.map(profile => (
              <MenuItem value={profile.id}>{profile.name}</MenuItem>
            ))}
          </Select>
      </FormControl>

Answer 2

您需要将 InputLabel 组件上的收缩属性设置为 true https://material-ui.com/api/input-label/

材质UI选择显示空标签覆盖输入

2 个答案: