首页 > 解决方案 > 如何为 Material-Ui 自动完成组件添加附加选项?

问题描述

我想为自动完成选项添加一个附加选项。我让它被看到:

    setOptions((state) => [
        ...state,
        { name: "All Results" },
      ]);

但这取决于您在搜索字段中输入的内容,如果我输入了一些不是该选项的字母,它将不会显示

  <Autocomplete
        freeSolo
        options={options}
        renderOption={(option) => (
          <Typography>
            <Link
              to={
                option.media_type === "movie"
                  ? "/movie/" + option.id
                  : option.media_type === "person"
                  ? "/person/" + option.id
                  : "/tv/" + option.id
              }
              style={{ textDecoration: "none" }}
            >
              {option.title ? option.title : option.name}
            </Link>
          </Typography>
        )}
        getOptionLabel={(option) => (option.title ? option.title : option.name)}
        noOptionsText
        style={{ width: "40vw", borderRight: "none", borderLeft: "none" }}
        renderInput={(params) => {
          return (
            <TextField
              {...params}
              variant="outlined"
              fullWidth
              placeholder="Search for movie, tv or person"
              value={value}
              onChange={optimisedVersion}
            />
          );
        }}
        
      />

标签: reactjsautocompletematerial-ui

解决方案


推荐阅读