标签: react-bootstrap

我将 Bootstrap 和路由添加到前端，删除了我的 node_modules，并使用 yarn install 重新安装了它们。当我尝试时npm run build，我得到：

Creating an optimized production build...
Failed to compile.

./node_modules/react-bootstrap/esm/index.js
Attempted import error: 'AccordionCollapseProps' is not exported from './AccordionCollapse'.

我想修复这个错误。如果有帮助，我可以发布更广泛的代码。

我正在尝试react-bootstrap与 Typescript一起使用，但出现此错误。

/home/vagnerwentz/Documents/www/wecanclub/node_modules/react-bootstrap/esm/index.d.ts
TypeScript error in /home/vagnerwentz/Documents/www/wecanclub/node_modules/react-bootstrap/esm/index.d.ts(2,1):
Declaration or statement expected.  TS1128

    1 | export { default as Accordion } from './Accordion';
  > 2 | export type { AccordionProps } from './Accordion';
      | ^
    3 | export { default as AccordionContext } from './AccordionContext';
    4 | export { default as AccordionCollapse } from './AccordionCollapse';
    5 | export type { AccordionCollapseProps } from './AccordionCollapse';

我正在尝试使用带有jquery的react-bootstrap文件输入fileupload().使用直接jquery,我会将$('#fileUpload').prop('files')文件传递给fileupload调用.但是,我不知道如何使用react-bootstrap正确获取文件.

<Input type='file' label='Upload' accept='.txt' ref='fileUpload' buttonAfter={uploadFileButton}/>

我是全新的反应,所以我可能错过了一些基本的东西.react-bootstrap站点React-Bootstrap中的示例代码显示以下内容.我需要使用数组驱动选项,但我很难找到将编译的示例.

<Input type="select" label="Multiple Select" multiple>
  <option value="select">select (multiple)</option>
  <option value="other">...</option>
</Input>

我正在使用react bootstrap,这个框架提供了一些不错的FormControls.

但是我想使FormControls中生成的Input字段具有readonly ="readonly"的prop.这样,此字段看起来与我的其他FormControls相同,但不在IOS上提供键盘输入.

在我的情况下,输入将由日历选择器提供,该日历选择器将由弹出窗口触发.

有谁知道如何给FormControl参数readonly ="readonly",以便浏览器中生成的输入字段将具有read readlyly ="readonly"？

很多thnx的答案!

我正在研究react-select图书馆并面临一些问题,我正在使用redux-form库并<Field />从中导入组件.这样我就可以通过表单将值提交给服务了.

我的问题:

当我使用react-select的默认值时,下面提到的代码工作正常.我可以从下拉列表中选择值,即使在聚焦时也会选择该值,该值将保留.但选择的值不是通过表单提交,因为<Select>这就是我包装组件和使用的原因redux-form

import React from 'react';
import Select from 'react-select';
import RenderSelectInput from './RenderSelectInput'; // my customize select box

var options = [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }];


class SelectEx extends React.Component {
    constructor() {
        super();
        this.state = { selectValue: 'sample' }
        this.updateValue = this.updateValue.bind(this);
    }

    updateValue(newValue) {
        this.setState({ selectValue: newValue })
    }

    render() {

        return (
            <div>
                <Select name="select1" id="selectBox" value={this.state.selectValue} options={options} …

我不断得到不变的违规行为,我真的不知道为什么......它肯定与OverlayTriggers有关.当他们离开时一切正常.

进口:

import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';

应该使用Key/Value对呈现列表项,其中Value有一个工具提示:

const renderCustomField = (field,customFields) => {
    const tooltip = (<Tooltip id="tooltip">{customFields[field]['sub']}</Tooltip>)
    return (
        <li>
            <OverlayTrigger placement="top" overlay={tooltip}>
                {field}
            </OverlayTrigger>
        </li>
    )
}

要呈现customFields的类:

export default class EventHeaderCustomFields extends Component {
    render () {
        const customFieldsNames = Object.keys(this.props.customFields);

        return (
            <Col xs={12}>
                <h4><strong>Short overview:</strong></h4>
                <ul>
                {customFieldsNames.map(
                    (field) => renderCustomField(field,this.props.customFields)
                )}
                </ul>
            </Col>
        )
    }
}

EventHeaderCustomFields.propTypes = {
    eventData:PropTypes.object
};

我尝试在打字稿模板中使用 react-bootstrap 的 Navbar 组件，我在 Chrome 控制台中发现了以下警告。

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
    in div (created by Context.Consumer)
    in Transition (created by Collapse)
    in Collapse (created by Context.Consumer)
    in NavbarCollapse (at NavigationBar.tsx:10)
    in nav (created by Navbar)
    in Navbar (at NavigationBar.tsx:7)
    in NavigationBar (at App.tsx:8)
    in div (at App.tsx:7)
    in App (at src/index.tsx:10)
    in StrictMode (at …