reactjs - Material UI 自动完成的多行选项

Question

我正在尝试进行自动完成，其中每个选项在第一行和firstName第二行都有lastName一个。userid

这是我尝试过的

<Autocomplete
        freeSolo
        disableClearable
        options={users}
        getOptionLabel={(option) => option.firstName + " " + option.lastName}
        renderOption={(option) => {
          return (
            <>
              <div>
                {option.firstName} {option.lastName}
              </div>
              <div>{option.id}</div>
            </>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Username or ID"
            // margin="normal"
            variant="outlined"
            value={name}
            onChange={handleChange}
            className={classes.input}
            InputProps={{
              ...params.InputProps,
              type: "search",
            }}
          />
        )}
      />

我正在返回一个组件，renderOption但它不需要关注<div>或<br/>标记。它只是将所有东西放在一起

标签： reactjsautocompletematerial-uimaterial-design

Answer 1

只需使用适当的 div 在下一行显示。单个外部 div 和一个嵌套 div 以在下一行显示 id。

renderOption={(option) => {
      return (
        <>
          <div>
            {option.title} {option.title}
            <div>
              {option.title}
            </div>
          </div>
        </>
      );
    }}