标签: reactstrap

我做的项目ReactJS.把reactstrap模块放在元素中bootstrap4.

我有reactstrap标签:

import React, {Component} from 'react';
import {
    Button,
    Col,
    Container,
    Form,
    Input,
    InputGroup, InputGroupAddon, InputGroupText,
    Label,
    Nav,
    NavItem,
    NavLink,
    Row,
    TabContent,
    TabPane
} from "reactstrap";
import {Link} from "react-router-dom";
import classNames from 'classnames';
import Logo from "../../components/common/Logo";

import '../../style/page/auth/style.css';
import '../../style/page/auth/media.css';
import '../../style/page/auth/custom.css';

class LoginPage extends Component {

    constructor(props) {
        super(props);

        this.state = {
            activeTab: 'signInTab'
        };

        this.toggle = this.toggle.bind(this);
        this.openTermsTab = this.openTermsTab.bind(this);
    }

    componentDidMount() {
        document.title = "???????????";
    } …

我正在尝试创建一张卡片，单击该卡片时会执行操作。

我设法通过在卡片上添加一个按钮来完成这项工作，该按钮绑定到一个事件处理程序，并按预期工作。

我试图让整张卡使用相同的事件处理程序，而不是使用按钮，但我似乎无法像我期望的那样工作。

const SiteCard = props => {
  const { site, siteSelectedCallback } = props;

  return (
    <Card onClick={siteSelectedCallback} className="card-item">
      <CardBody>
        <CardTitle>{site.name}</CardTitle>
        <CardText className="text-muted">{site.address}</CardText>
        <Button color="primary" className="float-right" value={site.id}>
         CHOOSE ME
        </Button>
      </CardBody>
    </Card>
  );
};

我试过将它包装在一个<a>标签中，但这也不起作用。

在这个例子中，我希望卡片是可点击的，但实际上按钮仍然可以与事件处理程序一起使用。我也试过删除按钮，但这不会使卡片可点击。

Reactstrap 的文档中没有Accordion的官方示例。

使用卡片组件，您可以扩展默认折叠行为以创建手风琴。要正确实现手风琴风格，请务必使用 .accordion 作为包装器。

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird …

<Carousel
  activeIndex={this.state.activeIndex}
  next={this.next}
  slide
  previous={this.previous}
>
  <CarouselIndicators
    items={this.items.map(item => item.id)}
    activeIndex={this.state.activeIndex}
    onClickHandler={this.goToIndex}
  />
  {this.items.map(item => {
    return (
      <CarouselItem
        onExiting={this.onExiting}
        onExited={this.onExited}
        key={item.id}
        src={item.images.big}
        altText={item.name}
      />
    );
  })}
  <CarouselControl
    direction="prev"
    directionText="?????"
    onClickHandler={this.previous}
  />
  <CarouselControl
    direction="next"
    directionText="??????"
    onClickHandler={this.next}
  />
</Carousel>

我有一个来自本示例reactstrap传送带的bootstrap传送带组件。但是当它渲染时我得到错误：

遇到两个具有相同密钥的孩子undefinedundefinedundefined。密钥应该是唯一的，以便组件在更新过程中保持其身份。非唯一键可能会导致子代重复和/或被忽略-该行为不受支持，并且可能在将来的版本中更改。在ol中（由CarouselIndicators创建）

但是“ CarouselIndicators”项是唯一值。谁能解释我哪里错了？

我开始使用reactstrap开发一个React应用程序。我按照“入门”运行以下命令：

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

npm install bootstrap --save
npm install --save reactstrap@next react react-dom

然后，我可以看到"bootstrap": "^4.0.0"在package.json的dependencies和引导/在我的项目node_modules文件夹中。好。

现在，我想更改例如boostrap原色。让我们开始简单:)。我已经阅读了Bootstrap 4主题，但是custom.scss在我的项目中找不到任何东西。

使用reactstrap时添加和编辑引导主题的正确方法是什么？另外，我怎么把我的变化跨引导更新，因为/node_modules是在.gitignore？

PS：我是网络新手，还是对发展感到反感，所以如果我问/说出任何愚蠢或显而易见的事情，我深表歉意。

谢谢

我正在使用reactstrap并一直关注此链接:

https://reactstrap.github.io/components/navbar/

在示例中,<nav className='ml-auto' navbar>正在<NavItem>向右推.但是,我正在尝试实现的(这与示例非常相似)是<NavItem>正在渲染的旁边<NavbarBrand>.

我已经检查了100次语法,看起来是正确的.我拥有的自定义CSS,它很少,似乎没有覆盖任何东西.控制台中的CSS看起来非常相似,它似乎受到以下因素的影响:

.ml-auto, .mx-auto {
    margin-left: auto!important;
}

至少在示例中将其切换到控制台中,将其移到我应用程序中的<NavItem>旁边<NavbarBrand>(我不想要).以下是我要看的内容:

Reactstrap示例(正确的间距):

我的应用程序的控制台(间距不正确):

如何在我的应用程序中获得正确的间距？

我真的不清楚影响margin-left: auto !important一个人而不是另一个人的工作.

我有以下关于 Reactstrap中工具提示的代码示例：

constructor(props) {
  super(props);
  this.state = {
    tooltipOpen: true
  };
}
.
.
.
render() {
  return (
    <div>
      <p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
      <Tooltip 
        placement="right" 
        isOpen={this.state.tooltipOpen} 
        target="TooltipExample" 
        toggle={this.toggle}>
        Hello world!
      </Tooltip>
    </div>
  ) 
}

我收到以下错误：

错误：在dom中无法识别目标“ TooltipExample”，提示：检查拼写

如果初始状态为，则一切正常tooltipOpen: false。但是我希望工具提示在用户加载页面时出现...

我该怎么办？

我是 React新手，我使用 Alert - Dismissing from Reactstrap，我需要警报在 2 秒后自动消失。我试图找到一些可以完成的功能，但不幸的是我没有。谢谢你的帮助

我是 React js 的新手。在这里，我使用reactStrap.

<Modal isOpen={props.isOpen} centered='true'>
        <ModalHeader>
          Change this Question?
          <button type="button" class="close" aria-label="Close" onClick={props.closeModal} ><span aria-hidden="true">×</span></button>
        </ModalHeader>
        <ModalBody>
          <div className="row">
            <div className="col-md-12 text-center ">
              <Button type="submit" className="btn btn-outline-primary" onClick={props.showChangeQuestionModal} >Change by creating your own Question</Button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center marginForOrOption">
              <span>or</span>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center">
              <Button type="submit" color="btn btn-primary">Change and Replace from Question bank</Button>
            </div>
          </div>
        </ModalBody>
        <ModalFooter>
        </ModalFooter>
      </Modal>
    </div>

现在我在这里添加了该按钮来关闭 modal 。但是在 reactstrap 中它是默认的。但在我的情况下它不会来。

另一个问题是，在 ModalHeader 中，它默认为 h5，所以我该如何更改？

注意：这个问题不是问如何绑定事件处理程序。它在问为什么在没有绑定的情况下，'s （它指的是一个对象）和's （它的）this不一致。ButtononClickFormonSubmitundefined

完整问题：

this如果我没有在构造函数内绑定方法，我试图检查方法内的对象会发生什么。我发现 Form 和 Button 的结果不同。下面是我的代码，以便更好地理解：

const {Button, Form, Input} = Reactstrap;

class Test extends React.Component{
    constructor(props){
        super(props);
    }

    handleClick(){
        console.log(this);    //This gives complete information about the Button object and its properties 
    }

    handleSubmit(e){
        console.log(this);    //This one is undefined 
        e.preventDefault();
    }

    render(){
        return(
            <React.Fragment>
                <Form onSubmit={this.handleSubmit} >

                <Input type="submit" name="submit">Submit</Input>

                </Form>

                <Button name="butt1" onClick={this.handleClick}>Click</Button>
            </React.Fragment>
        );
    }
}

ReactDOM.render(<Test />, document.getElementById("root"));

<div id="root"></div>

<script …