标签: react-bootstrap

尝试使用'zindex'道具,如下所示:https: //github.com/facebook/react/issues/1456

<Input ref="username" type="text" label="Username" 
placeholder="Enter username" zindex={1} />

不行.还试过'zindex ="1"'

有任何想法吗？

我按照React.js中的帖子 更新样式onScroll上的指令来注册滚动事件的事件监听器.

我有一个React组件,它从React-Bootstrap库中呈现一个Table组件https://react-bootstrap.github.io/

我想我正确地注册了事件监听器,但我不确定为什么当我向下滚动表时,我的handleScroll()回调没有被调用.是因为事件监听器没有在实际表本身上注册吗？

感谢您花时间阅读我的问题.任何反馈都表示赞赏.

这是我如何注册事件监听器的片段.

  handleScroll: function(event) {
    console.log('handleScroll invoked');
  },

  componentDidMount: function() {
    console.log('componentDidMount invoked');
    window.addEventListener('scroll', this.handleScroll);
  },

  componentWillUnmount: function() {
    console.log('componentWillUnmount invoked');
    window.removeEventListener('scroll', this.handleScroll);
  },

这是我的渲染功能的片段.

  render: function() {

    var tableRows = this.renderTableRow(this.props.sheet);

    return (
      <Table striped bordered condensed hover>
        <TableHeaderContainer
          tableTemplateName={this.props.tableTemplateName}
          sheetName={this.props.sheet.name}/>
        <tbody>
          {tableRows}
        </tbody>
      </Table>
    );
  }

我正在使用react-bootstrap-table(var ReactBsTable = require("react-bootstrap-table")).

我想在bootstraptable中添加一个只包含按钮的列.

不知道谢谢.

<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
  <TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
  <TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
  ///I dont know if here or there is option to use
 </BootstrapTable>

我尝试添加一个按钮,显示与此按钮对应的id或行数据.我使用了jquery,但是我给了一个id按钮,但所有这些按钮都有相同的id,所以只有第一个工作,其余的没有.

<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
  <TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
  <TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
  <TableHeaderColumn dataField="button" dataFormat={this.buttonFunction}></TableHeaderColumn>

 </BootstrapTable>

buttonFunction: function (cell, row) {
        var today = new Date().toISOString();
        if (row.status === "En cours") {
            if (row.dateEnd > …

我有一个Rails 5应用程序,我已经安装browserify和react-rails.我可以使用加载组件和安装包npm.加载某些外部软件包时的浏览器控制台即react-bootstrap组件填充了"警告:您正在为组件上的每个可用支柱手动调用......的React.PropTypes验证函数".

我到处寻找,但我不明白如何修复这些警告.这里也提出了类似的问题,但这似乎没有适用于我的问题的答案.

这是我的文件:

的package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "browserify": "^13.1.0",
    "browserify-incremental": "^3.0.1",
    "fetch": "^1.1.0",
    "jquery": "^3.1.1",
    "jquery-ui": "^1.12.1",
    "jquery-ujs": "^1.2.2",
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.4",
    "react-dom": "^15.3.2",
    "reactify": "^1.1.1",
    "sweetalert-react": "^0.4.4"
  }
}

的application.js

//= require_self
//= require react-server
//= require react_ujs


window.$ = window.jQuery = global.$ = require('jquery');
var React = window.React = global.React …

我发现很难在Material UI上创建带有菜单的导航栏.我已经阅读了它的AppBar文档.但是,似乎他们没有提供这个功能.

1)Material UI AppBar

2)React Bootstrap Navbar

如何像React Bootstrap一样在Material UI上创建导航栏菜单呢？

我正在使用react-strapnpm包在我的React应用程序中使用Bootstrap 4组件.

当我尝试添加datepicker时 react-bootstrap-date-picker

npm install --save react-bootstrap-date-picker

然后尝试在我的组件中使用它:

var DatePicker = require("react-bootstrap-date-picker");

我收到了错误

./~/react-bootstrap-date-picker/lib/index.js出错

找不到模块:C:\ Users\y\Desktop\Code\test \node_modules\react-bootstrap-date-picker\lib中的'react-bootstrap/lib/Button'

@ ./~/react-bootstrap-date-picker/lib/index.js 15:14-51

这是因为react-bootstrap-date-picker不兼容react-strap吗？在这种情况下,我应该为bootstrap 4组件安装哪些npm软件包,以便datepicker模块可以工作？

我刚刚开始在我的网站中实现React-Bootstrap,但点击它时NavDropdown组件不会扩展.

我做了什么: npm install -s react-bootstrap

添加css到html:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

创建我的Navigation组件:

import React from 'react';
import PropTypes from 'prop-types';
import NavbarHeader from 'react-bootstrap/lib/NavbarHeader';
import NavItem from 'react-bootstrap/lib/NavItem';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import NavbarCollapse from 'react-bootstrap/lib/NavbarCollapse';
import NavbarBrand from 'react-bootstrap/lib/NavbarBrand';
import NavbarToggle from 'react-bootstrap/lib/NavbarToggle';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';

export class Header extends React.PureComponent {
  render() {
   return (
    <Navbar inverse collapseOnSelect>
    <NavbarHeader>
      <NavbarBrand>
        <a href="#">React-Bootstrap</a>
      </NavbarBrand>
      <NavbarToggle />
    </NavbarHeader> …

这个在静态视图上相当简单的平凡任务不符合React.

有人可以告诉我如何在新标签上打开pdf文件作为href吗？

这是我使用react-bootstrap和react-router的代码:

    <NavDropdown eventKey={3} title="Forms">

        <MenuItem eventKey={3.1} href="https://www.google.com/" target="_blank">Form 1</MenuItem>

        <MenuItem eventKey={3.2} href="samba.pdf" target="_blank">Form 2</MenuItem>
    </NavDropdown> 

谷歌的外部链接工作正常.

pdf(保存在与上面代码相​​同的级别目录中)不是.

当我点击pdf链接时,它会将我重定向到我的"404 catch all"路线.

    <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/contact" exact component={Contact} />
        <Route path="/about" exact component={About} />
        <Route component={NotFound} />
    </Switch>;

编辑: 解决方案: Link_Cable回答

我正在尝试使用 React Bootstrap 中的表单组件构建一个自动完成搜索字段，该组件由浏览器呈现为输入。

这是我在 React 组件中所做的事情：

<FormControl
 id="frenchToEnglishInput"
 placeholder="type a word..."
 aria-label="Recipient's username"
 autocomplete="on"
 data={frenchToEnglishWords}
 onChange={this.fetchFrenchToEnglish}
 renderItem = {item => {
   return (
     <div>
       {item}
     </div>
   );
 }}
/>

该frenchToEnglishWords数组在组件外部声明为 a var，因为我打算在输入字段中键入一些值时更新它。

现在这是触发事件的函数onChange：

fetchFrenchToEnglish = async () => {
    if(document.getElementById("frenchToEnglishInput").value!==''){

      axios.get(dictionaryURIs.english.French_English+""+document.getElementById("frenchToEnglishInput").value)
      .then(response => {
          frenchToEnglishWords = response.data
      })

    }
  }

在集合上设置自动完成索引后，该请求是从 MongoDb 发出的，但这部分工作正常。

我的问题是，为什么我得到的唯一“自动完成”是由我之前输入的单词组成的？

或者也许我用作输入数据的数组必须是 a const（正如我在许多示例中看​​到的那样）而不是var？当我输入某个单词时，我没有从frenchToEnglishWords正在从数据库更新的 中得到任何自动建议。

正如标题中所述，我正在尝试创建一个布局组件，但使用任何反应引导组件似乎都会给我错误。在这种情况下，使用我收到错误：

类型错误：无法读取 null 的属性（读取“useContext”）

该布局组件的代码如下：

import React from 'react';
import { Container } from 'react-bootstrap';

export const Layout = (props) => (
    <Container>
        {props.children}
    </Container>
    )

这是从下面的 App.js 调用的：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './components/Home';

import './custom.css'

class App extends Component {
  render () {
    return (
        <Layout>
            <Switch>
                <Router>
                    <Route exact path='/' component={Home} />
                </Router>
            </Switch> …