如何显示选项的值而不是标签，MUI 自动完成

Question

我正在开发一个 React/Typescript 项目。我有一个 Autocomplete 元素，其选项是一系列包含 {label、value 和 endOfDay} 的对象。我在下拉列表中正确显示了选项标签，但是，当在输入字段中选择选项时，我想显示选项的值，而不是标签。

更具体地说，标签可能是“01/01/2024”，但值是“01/01/2024 00:00”。我希望当他们选择标签“01/01/2024”时显示该值。最终，我希望它显示值+ endOfDay，但我当前的问题是获取要显示的值而不是标签。

这是我的自动完成代码：

{!endPickerAvailable && (
        <Box sx={pickerBoxStyle(theme)}>
          <Typography sx={labelStyle(theme)}>TIME RANGE</Typography>
          <Box sx={accentAndPickerStyle(theme)}>
            <StyledHUDAccent sx={HUDAccentStyle(theme)} />
            <Autocomplete
              data-testid='database-picker'
              options={formatTimeRangePickerDates(startValueOptions)}
              getOptionLabel={(option) => option.label}
              renderInput={(params) => (
                <TextField {...params} value={selectedDate.value} />
              )}
              onChange={(event, selectedOption) => {
                if (selectedOption) {
                  setSelectedDate(selectedOption);
                  console.log(selectedDate);
                }
              }}
              sx={databasePickerStyle(theme)}
              disableClearable
            />
          </Box>
        </Box>
      )}

selectedDate 设置正确，并且该值是正确显示的值

我尝试将 TextField 的值设置为我想要显示的值，但它仍然在选择时显示标签而不是选项的值。

Answer 1

TextField 值不会影响输入中显示的内容