Question

如何在自动完成表格的标签中同时显示标题和年份？

这是标准的Material UI演示。当我尝试使用数组在表单标签中同时显示标题和年份时，出现关于降低结果大小写的错误。我认为这是因为该值不再是字符串-但我看不到如何解决该问题。

<Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={top100Films}
      disableCloseOnSelect
      getOptionLabel={(option) => [{option.title}, {option.year}]}  // - this doesn't work
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          //[{option.title}, {option.year}] - this doesn't work
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },

Answer 1

所以-解决方案是将options标记保留下来（仅保留标题），然后在复选框标记中同时使用title和year，如下所示：

{option.title} {option.year}

我不知道为什么会这样，但是确实可以。

材质用户界面-具有2个变量的自动填充表单标签

1 个答案: