小编cas*_*hol的帖子

React-router v6:获取当前路由的路径模式

是否可以获得当前匹配路由的路径模式?例子:

<Route
    path=":state/:city*"
    element={
        <Page />
    }
/>
Run Code Online (Sandbox Code Playgroud)
<Route
    path=":state/:city*"
    element={
        <Page />
    }
/>
Run Code Online (Sandbox Code Playgroud)

我知道我可以用来useMatch检查当前位置是否与特定路径模式匹配,但组件必须知道路径模式是什么。

javascript reactjs react-router react-router-dom

100
推荐指数
5
解决办法
16万
查看次数

react-router v6:使用 searchParams 导航到 URL

我正在使用反应路由器 v6。我想导航到具有 searchParams 的 URL,但我没有找到开箱即用的方法。useNavigate允许我通过传入字符串来导航到 URL。useSearchParams允许我在当前页面上设置 searchParams。

我可以使用生成 searchParams createSearchParams,然后将其转换为字符串,并将其附加到 URL 的末尾,?中间有一个,但这看起来像是一个 hack。

我希望能够做类似的事情:

const navigate = useNavigate();

// listing?foo=bar
navigate("listing", {
    params: {
        foo: "bar"
    }
});
Run Code Online (Sandbox Code Playgroud)

我的黑客解决方法:

function useNavigateParams() {
    const navigate = useNavigate();

    return (url: string, params: Record<string, string | string[]>) => {
        const searchParams = createSearchParams(params).toString();
        navigate(url + "?" + searchParams);
    };
}

const navigateParams = useNavigateParams();

navigateParams("listing", {
    foo: "bar"
});
Run Code Online (Sandbox Code Playgroud)

我错过了文档中的某些内容吗?

javascript reactjs react-router react-router-dom

40
推荐指数
3
解决办法
10万
查看次数

使用Bootstrap Select禁用dropup功能

我正在使用Bootstrap Select为手风琴中的某些选择字段设置样式.Bootstrap select具有一个功能,如果它靠近屏幕底部,它将使你的下拉式下拉.

在这种情况下,我不希望它放弃,但我找不到禁用它的位置.

Bootstrap选择:https://developer.snapappointments.com/bootstrap-select/

select twitter-bootstrap bootstrap-select

23
推荐指数
1
解决办法
2万
查看次数

如何在silviomoreto的Bootstrap-Select上添加选项值

我使用了silviomoreto的bootstrap-select但是我遇到了问题.我有2个下拉列表(选择)区域下拉列表和城市.现在,我有一个jquery onchange函数,该函数将根据所选区域更改城市下拉列表中的值.这是我的代码:

<select id="region" class="selectpicker"></select>
<select id="cities" class="selectpicker"></select>

$("#region").on('change', function () {
   $("#cities").html('<option>city1</option><option>city2</option>');
});
Run Code Online (Sandbox Code Playgroud)

问题是我认为兼容性?当我删除class ="selectpicker"时它工作正常,但我无法将其删除,因为我将它用于我的下拉菜单.我查了这里的文档https://developer.snapappointments.com/bootstrap-select/但是我找不到我的问题的相关答案.谢谢!

javascript jquery twitter-bootstrap

19
推荐指数
1
解决办法
4万
查看次数

如何使用Bootstrap-select?

我是新手.我正在尝试Bootstrap-select,但我没有像这里得到所需的效果https://developer.snapappointments.com/bootstrap-select/.我已下载文件并指向头部的CSS和JS.我已经在头部启用了Bootstrap-select,但仍然无法工作 - 我只是获得默认外观.这是我的完整代码.我在这做错了什么?任何提示将不胜感激.

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<link href="bootstrap-master/docs/assets/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap-master/docs/assets/css/bootstrap-select.css" rel="stylesheet" />
<script src="bootstrap-master/docs/assets/js/bootstrap-select.js" type="text/javascript"></script>
<script>
$('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4
  });
</script>
</head>

<body>
<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

html jquery select twitter-bootstrap

12
推荐指数
3
解决办法
9万
查看次数

Twitter Bootstrap选项卡和bootstrap-select溢出问题

我使用twitter bootstrap和这个插件来选择菜单http://silviomoreto.github.com/bootstrap-select/.

当我尝试将此选择应用于选项卡内的内容时,我遇到了问题.

http://jsfiddle.net/gbGdY/1/演示来说明问题.

外部选项卡,一切正常,但内部选项卡 - 溢出不能正常工作.

另外,如果我尝试覆盖标签溢出(像这样)

.tab-content {
  overflow: visible !important;
}
Run Code Online (Sandbox Code Playgroud)

然后我又遇到了另一个问题 - 菜单下降并扩展到全高.

所以,我的问题是如何避免这个问题,并使选择菜单在选项卡内工作就像它在标签外工作.

html css twitter-bootstrap

5
推荐指数
1
解决办法
5971
查看次数