标签: react-bootstrap

使用react-bootstrap-table,我创建了一个表如下:

<BootstrapTable data={props.instances} hover condensed selectRow={props.selectRowOpts}>
  <TableHeaderColumn dataField={'interval_value'} dataSort>{'Interval'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'status_name'} dataSort>{'Status'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'started_ts'} dataSort>{'Started'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'completed_ts'} dataSort>{'Completed'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'last_runtime'} dataSort>{'RT'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'attempts'} dataSort>{'Attempts'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'pid'} dataSort>{'PID'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'node_instance_id'} dataSort isKey>{'ID'}</TableHeaderColumn>
</BootstrapTable>

但是,这给了我一些有趣的结果.这是我的表格(表格位于以下内容Tab中react-bootstrap:

我做错了什么？最奇怪的部分是顶部的标题工作,但实际附加到表的标题什么都不做.

编辑:重新导入CSS后表 在我的index.html我现在有:

但是,虽然这修复了双头问题,但它仍然存在未对齐标头列的问题.该表现在看起来像这样:

我也尝试过该react-bootstrap-table-all.min.css文件,但结果相同.

更新: 使用其中一个标题执行排序可修复对齐问题.但是为什么一开始会被打破？

我试图在onClick事件发生后清除我的输入字段。

我正在使用react-bootstrap库，虽然有getValue()方法，但没有setValue(value)方法。

我偶然发现了这个讨论。

为了在提交后简单地清理表单，我不完全理解他们的建议。

毕竟，如果我使用简单的 HTML<input>而不是react-bootstrap我可以通过元素获取节点ref并将其值设置为空字符串或其他东西。

什么被认为是清理 react-bootstrap<Input />元素的反应方式？

我正在尝试在 react-bootstrap-table 的格式化程序中使用 react-bootstrap OverlayTrigger 和 Tooltip 并不断收到以下错误：

OverlayTrigger 唯一需要的道具是overlay，它应该是一个节点，而工具提示唯一需要的道具是id（尽管他们的例子没有显示你需要一个ID），它需要是一个字符串。

“onlyChild 必须传递给只有一个孩子的孩子。”

有问题的相关代码如下：

import {Button, DropdownButton, MenuItem, Modal,
    OverlayTrigger, Tooltip} from 'react-bootstrap';

....

const submitterFormatter = (submitter, row) => {
  return (
    <OverlayTrigger placement="bottom" overlay={toolTipComponent(submitter, row)}>
      {submitter}
    </OverlayTrigger>
  );
};

const toolTipComponent = (toolTipText, row) => {
  return (
    <Tooltip id={String(row.id)}>
      {toolTipText}
    </Tooltip>
  );
};

我也为 submitterFormatter 尝试了以下方法

const submitterFormatter = (submitter, row) => {
  return (
    const toolTipInstance = toolTipComponent(submitter, row);
    <OverlayTrigger placement="bottom" overlay={toolTipInstance}>
      {submitter}
    </OverlayTrigger>
  );
};

我正在尝试更改 React-Bootstrap 按钮的背景颜色。

我做了这个

const btn ={backgroundColor: '#F16E10'}; <Button bsStyle="" bsClass="btn" bsSize="large" onClick={this.handleEvent}>Something</Button>

但它不起作用，我可以更改此背景颜色吗？

谢谢，

我目前正在尝试使包含在 react-bootstrap 中的 Modal 组件全屏显示。

我可以从文档中看到，对话框的各个组件（模态、页眉、页脚、正文）通过“bsClass”接受自定义类，但是一旦呈现高度，高度就会被另一个具有“模态内容”类的 div 限制，但看不到将自定义类传递给 this 的方法。

是否可以这样做，或者是否有另一种方法可以在对话框呈现后无需手动更改类即可实现相同的效果？

我正在迭代dict并在react-bootstrap下拉菜单中显示键.这是我的React下拉组件,

class Dropdown extends React.Component
{
    constructor(props)
    {
        super(props);
        this.onTargetSelect = this.onTargetSelect.bind(this);
    }

    onTargetSelect(target)
    {
        console.log("Outputting from here: ", target);
        document.getElementById("dropdown-title").textContent(target);
        this.props.passTargetToParent(target);
    }

    render()
    {
        return(
        <SplitButton title="Select Target" id="dropdown-target">
            {Object.keys(dict).map(key => <MenuItem key={dict[key]} 
              href={`#${dict[key]}`} 
              onSelect={this.onTargetSelect(dict[key])}>{key}</MenuItem>)}
        </SplitButton>);
    }

}

我在这里尝试做两件事,由于我对Javascript的了解有限,这些事情很难实现.

1. 这将显示与加载时相应键关联的所有值.那不是我想要的行为.我只想在下拉列表中控制记录所选项目.

2. 其次,我想更改当前显示的标题Select Target,以下拉列表中的所选项目.

我有一个简单的表单来上传一个文件，稍后将处理我的后端 python 代码。但是，当我尝试上传文件时得到的是 C:\fakepath\test.txt 。

从我所做的研究来看，出于安全考虑，这是预料之中的。这很好，但现在我的问题是我到底如何才能解决这个问题才能使用我在后端上传的文件？

我看了很多不同的地方，似乎没有一个解决这个问题。

这是我当前的代码：

class SomeForm extends Component{

    handleFile(e){
        this.setState({value: e.target.value});
    }

    handleSubmit(e){
        var me=this;
        if (this.state.value.length>0){
            var upload_file = this.state.value;
            const request = axios.post(this.props.cfg_url+'/upload', {upload_file})
                .then(function(response){
                console.log('successfully uploaded', upload_file);
            })

        }
    }

   render(){
      return(


           <Form inline onSubmit={this.handleSubmit}>
                        <FormGroup controlId='uploadFormId'>
                            <ControlLabel>Upload File:</ControlLabel>
                            <FormControl
                                type='file'
                                label='File'
                                onChange={this.props.onChange}
                            />
                        </FormGroup>
                        <Button type='submit'>Upload</Button>
                    </Form>
       );

   }
}

我已经在我的React应用程序中使用React-Bootstrap实现了Navigation Tabs。

像这样：

<Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

现在，在更改选项卡上，我想调用以下功能：

changeTab(login) {
    if (login)
        this.setState({ heading: "Log in" })
    else
        this.setState({ heading: "Sign up" })
}

其中login是布尔值，true用于Log in选择选项卡和选择选项卡false时Sign up。

我怎样才能做到这一点？

编辑：

我发现您可以在单击选项卡时像这样调用一个函数：

<Tabs defaultActiveKey={1} onClick={()=>this.changeTab()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

但是如何知道单击了哪个选项卡？我需要它基于单击哪个选项卡来更改状态。

我有2个项目：Project1和Project2。

Project1使用react-bootstrap。Project1使用react-bootstrap的所有组件，并在react-bootstrap组件上创建包装器（不要问为什么，这是必需的）。Project2应该使用Project1（导出时）作为react-bootstrap的包装器库。

项目1- >

index.js：

import { Bootstrap } from 'bootstrap/dist/css/bootstrap.css';
...
import Glyphicon from './src/components/Glyphicon';
...
export default {
...
Glyphicon,
...
};

src / components / Glyphicon.jsx：

import React, { PropTypes } from 'react';
import { RBGlyphicon } from 'react-bootstrap';

const Glyphicon = props => (
  <RBGlyphicon
    id={props.id}
    bsClass={props.clClass}
    glyph={props.glyph}
  />
);

Glyphicon.defaultProps = {
  id: undefined,
  clClass: 'glyphicon',
  glyph: undefined,
};

Glyphicon.propTypes = { …

我的项目有以下依赖项。

"dependencies": {
    "amazon-cognito-identity-js": "^1.28.0",
    "bootstrap": "^3.3.7",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17"
  },

我使用漂亮的样板命令创建了我的项目，create-react-app my-app.

我现在遇到了一个问题，我需要告诉 WebPack（我发现 React 使用它）排除 jQuery 的依赖，这样我才能让React Slider工作。

问题是 webpack 配置是节点模块的一部分。如果我修改那里的任何内容，它不会反映任何下载我的项目的用户。应该有一种方法可以覆盖默认的 webpack 设置，但我不知道该怎么做？

我发现这个项目可能会做我需要但不确定的事情。

说明说我需要将它添加到 webpack 配置中。

resolve: {
    alias: {
         "jquery": path.join(__dirname, "./jquery-stub.js");
    }
}

鉴于我无法直接访问 Webpack，我该怎么做？