Bootstrap Select元素未使用react-router呈现 [英] Bootstrap select element not rendered with react-router
问题描述
我正在用reactjs制作一个基本的应用程序.我已经为3个组件设置了路由.问题在于呈现组件时选择字段没有出现.我正在为选择字段使用bootstrap-select库.
以className作为"selectpicker"的选择字段不会呈现，只是不存在.当我从className中删除"selectpicker"时，它们出现了.使用"selectpicker"时，它们会在重新加载浏览器页面时显示.
以下是我的代码的摘录:
预期:要呈现的选择输入字段.预期应如下所示:
我尝试对问题的评论之一建议添加 Below is a snippet from my code:
https://codesandbox.io/s/determined-panini-2mmv3
All three components are almost similar.
Following is my index.html file, and i have included the bootstrap and bootstrap-select correctly. Its working fine when rendering the components individually. The problem arose when I started with routing. Here's the link to my problem's codesandbox https://codesandbox.io/s/determined-panini-2mmv3 Actual output: The select input fields with "selectpicker" class don't show up at all. Only the labels and other text inputs are visible. When the "selectpicker" className is removed, it works as expected. I get the following as output:
Expected: The select input field to be rendered. The expected should be as follows:
I tried, as suggested by one of the comments on the question, to add The import The quickest fix would be to explicitly use the jQuery 这篇关于Bootstrap Select元素未使用react-router呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ $('select').selectpicker()在我的 componentDidMount()中.但是它没有按预期工作.相反，我遇到了一个错误 __ WEBPACK_IMPORTED_MODULE_8_jquery ___ default(…)(…).selectpicker不是一个函数.经过几天的努力，我能够使用
import React from 'react'
import A from "./A"
import B from "./B"
import C from "./C"
import {BrowserRouter as Router, Switch, Link, Route} from "react-router-dom"
class App extends React.Component{
constructor(){
super()
}
render(){
return(
<div>
<Router>
<ul>
<li><Link to="/">TO A</Link></li>
<li><Link to="/page1">TO B</Link></li>
<li><Link to="/page2">TO C</Link></li>
</ul>
<Switch>
<Route exact path='/' component={A}/>
<Route path='/page1' component={B}/> {/* components B and C have select field with selectpicker class*/}
<Route path="/page2" component={C}/>
</Switch>
</Router>
</div>
)
}
}
export default App
{/*Component A*/}
import React from "react"
class A extends React.component{
constructor(){
super()
this.state={
componentA: ""
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event){
const {name, value, type, checked} = event.target
type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
}
render(){
return(
<div className="form-group row">
<label htmlFor="tempid" className="col-sm-2 col-form-label">Choose an option</label>
<div className="col-sm-10">
<select
className="form-control custom-select selectpicker"
name = "componentA"
id = "tempid"
value = {this.state.componentA}
onChange = {this.handleChange}
required
>
<option value="" style={{display:"none"}} disabled selected>Choose one</option>
<option value="p">P</option>
<option value="q">Q</option>
<option value="r">R</option>
<option value="s">S</option>
</select>
</div>
</div>
)
}
}
export default A
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="Web site created using create-react-app">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js" type="text/javascript"></script>
</body></html>
$('select').selectpicker() in my componentDidMount(). But it did not work as expected. Instead I excountered an error __WEBPACK_IMPORTED_MODULE_8_jquery___default(…)(…).selectpicker is not a function.
After struggling for days literally, I was able to fix the issue using the answer from React Error : __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal is not a function.import $ from 'jquery' creates a local variable named $ inside your module, which then gets used by $('.selectpicker').selectpicker() (instead of the global $ you wanted).$ from the global context (which has been extended with your $.selectpicker() because you referenced that in your script tag.window.$('.selectpicker').selectpicker()
