小编dee*_*s27的帖子

我具有具有多项选择权限的自动完成功能。

https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.js

在示例中，我有 3 个城市选项。当选择某些内容时，如何在 TextField 中手动添加自动添加值？

换句话说：

 renderInput={(params) => {
        console.log(params);
        return (
          <TextField
            {...params}
            variant="outlined"
            label="Cities"
            placeholder="Enter cities"
            autoComplete="off"
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <React.Fragment>
                  {params.InputProps.endAdornment}
                </React.Fragment>
              )
            }}
          />
        );
  }}

我希望能够在渲染文本字段之前向params.InputProps.startAdornment添加一个值。

由于每个选定的对象似乎都是非常复杂的对象，我如何手动执行此操作（push() 太复杂了）？任何想法如何我可以添加这样的对象：

手动？

我一直在开发 sveltekit 应用程序，最近我的主导航菜单遇到了问题。当加载或刷新应用程序时，与当前 URL 对应的当前菜单项不会设置为活动状态。（即菜单项“Home”的 URL 为“/”）我很难在网上找到任何有用的东西来演示如何设置它，但我有一个可行的解决方案，并认为我会为其他人记录它。目前很简单。

我有一个 nav.json 文件，我在其中定义应用程序中的任何菜单，从而可以轻松组织菜单。我将其导入到文件顶部并将其存储在数组中以供以后使用。

import menuObj from '../nav/nav.json';

let sidebar = menuObj.menus[0].items;

onMount()只是在加载导航组件时获取当前路径，并且只为我运行一次。

然后 - 使用<svelte:window on:click={handlePageClick}/>我们可以监听页面上的任何点击。

在该handlePageClick(e)方法中我们传递 on:click 事件。使用该事件我们可以捕获当前pathname的 URL。这允许我们检查pathname我使用 html 中的方法item.path导入和提取的 nav.json 文件中定义的内容。如果项目路由与当前路径匹配，我们可以将类设置为活动状态#each。<a>

这是完整的实现

<script>
    import menuObj from '../nav/nav.json';
    import {onMount} from "svelte";

    let path;
    let sidebar = menuObj.menus[0].items;

    onMount(() => {
        path = window.location.pathname;
    })

    function handlePageClick(e) {
        path = e.view.location.pathname;
    }

</script>

<svelte:window on:click={handlePageClick}/>
<nav class="sidebar"> …