标签: reactstrap

我正在使用此控件进行分页链接并能够得到以下结果。

我可以更改非选定/活动项目的背景颜色，但如何更改选定项目的样式，如上图 8 所示，它是紫色的，所以我需要它是不同的颜色。

下面是react中的JS代码

const styles = theme => ({
    paginationItemStyle: {
        marginLeft: "5px",
        color: "white"
    },
    paginationLinkStyle: {
        backgroundColor: "#b90000",
        borderRadius: "5px",

        "&:hover": {
            backgroundColor: "#772e2e",
        },

        "&:active": {
            backgroundColor: "#772e2e",
        }
    }
});


<Pagination>

    <PaginationItem>
        <PaginationLink previous />
    </PaginationItem>

    {someNumbersList.map((i, key) => (
    <PaginationItem key={key} className={classes.paginationItemStyle} active={currentPage==(i+1)}>
        <PaginationLink className={classes.paginationLinkStyle}>
            {i+1}
        </PaginationLink>
    </PaginationItem>
    ))}

    <PaginationItem>
        <PaginationLink next />
    </PaginationItem>

</Pagination>

        <FormGroup>
          <div>
            {this.props.diseases.map((disease, index) => (
              <FormGroup>
                <CustomInput
                  type="switch" 
                  id="exampleCustomSwitch"
                  key={disease}
                  disease={disease}
                  onClick={(disease) => this.props.toggle(disease)}
                  label={disease}
                />
              </FormGroup>
            ))
            }
          </div>
        </FormGroup>

1. 我希望能够找出开关的状态，无论是打开还是关闭。不知道我怎样才能做到这一点？我是否要传递某种默认值，其中 0 表示关闭，1 表示打开？

2. 目前，开关已从阵列中正确映射，但打开或关闭仅适用于第一个开关。因此，如果我单击任何其他开关，由于某种原因，第一个开关会切换。

如何从引导模式中获得价值？我正在使用reacstrap https://github.com/reactstrap

这是我调用模态的页面

import { ButtonGroup, Button, Input, Row, Col } from 'reactstrap';
import RegisterLookup from '../lookup/RegisterLookup';

<RegisterLookup
  isOpen={this.state.register}
  toggle={this.toggleRegister}
  className={''}
/>

这是我的模态组件：

  register() {
    console.log("da")
  }

render() {
    return (
      <div>
        <Modal isOpen={this.props.isOpen} toggle={this.props.toggle} className={this.props.className} size="lg">
          <ModalHeader toggle={this.props.toggle}>Register</ModalHeader>
          <ModalBody>
            <div className="row mb-2">
              <div className="col-sm-12">
                <Row>
                  <Col md="6" xs="12">
                    <FormGroup row>
                      <Label sm="4">Enter your name <span className="text-danger">*</span></Label>
                      <Col>
                        <Input />
                      </Col>
                    </FormGroup>
                  </Col>
                </Row>
              </div>
            </div>

          </ModalBody>
          <ModalFooter>
            <Button className="pull-right" type="button" color="primary" onClick={() => { this.register(); }}>
              <span className="hidden-xs-down">Register …

我有一个错误栏，需要在 时缓入error = true。

在render()我有：

render() {
    const { errors } = this.props;

    return (
        <div id='messages'>
                <div className={ errors ? 'show-messages' : 'hidden-messages' }>
                    <Container>{ this.renderMessage() }</Container>
                </div>
        </div>
    )
}

例如，用户尝试登录，如果凭据错误，服务器会响应，导致this.props.errors变为true和show-messages。

不过，我希望酒吧能够ease-in。

这是我尝试过的最新CSS：

.hidden-messages {
    visibility: hidden;
    transition: width 2s, height 2s;
    -webkit-transition: width 2s, height 4s;
    transition-delay: 5s;
}

.show-messages {
    visibility: visible;
    background-color: #FFF;
    transition: width 2s, height 2s;
    -webkit-transition: width 2s, height 4s; …

我希望模态在点击它的外部时关闭，就像在示例中一样：https : //reactstrap.github.io/components/modals/但它没有发生：

https://codesandbox.io/s/x9rx5jx34q

按下按钮，然后单击其他任何地方，没有任何反应。我的代码中也会发生同样的情况。

我试图添加backdrop={true}为模态的道具，但没有用。

那么 reactstrap 在他们的例子中使用了什么？

我注意到 Reactstrap 文档中的大多数表单元素都有 cssModule 的 PropType。我认为这意味着我可以覆盖默认的 Reactstrap 样式并执行如下操作：

表单文本.module.css

.formtext {
  background-color: blue;
  border: 2px solid black;
  margin: 10px;
}

SimpleForm.jsx

import styles from "./Formtext.module.css";
...

<FormText cssModule={styles.formtext}>
   This is some placeholder help text...
</FormText>

````

然而，这似乎不起作用。检查我的反应开发工具， cssModule prop 的计算结果为undefined.

我正在使用 Reactstrap 5.0 和 create-react-app 1.1.5

有什么我不知道但我需要做的事情吗？我需要弹出才能使用 css 模块吗？有人可以向我指出如何正确使用 Reactstrap 的 cssModule 属性的示例吗？

这里供参考的是 Reactstrap 文档中的 proptypes 定义

FormText.propTypes = {
  children: PropTypes.node,
  inline: PropTypes.bool,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
  color: PropTypes.string, // default: 'muted'
  className: PropTypes.string, …

我正在使用 ReactJS 和 ReactStrap 在我的页面上创建选项卡。
当我打开包含选项卡的页面时，所有选项卡内容的组件都安装在页面加载中，但我希望在该特定选项卡处于活动状态时加载组件。
我的代码

ReactStrap 选项卡示例

我有一个使用 bootstrap 4 和 Reactstrap 的 React Web 应用程序。我想在工具栏中有几个复选框，但除了“on”之外，我不知道如何从 onChange 事件中获取任何内容。

这是我的代码，每次单击该复选框时，该代码都会继续“on”写入控制台。该复选框确实可以打开和关闭。

     <li className="show-sessions">
        <FormGroup check>
          <Label check>
            <Input
                type="checkbox"
                onChange={(e) => console.log(e.target.value)}
            />{" "}
            <strong>Show Favorites</strong>
          </Label>
        </FormGroup>
      </li>

还有另一种方法可以在 Reactstrap 中制作复选框吗？文档的内容非常有限。

我正在尝试添加react-hook-form到我的reactstrap表单和输入中，但看起来包之间存在冲突。

import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
import {
    Button,
    Form,
    Label,
    Input
} from 'reactstrap';
import { FormControlLabel, Checkbox, FormGroup } from '@material-ui/core';

...

const { register, handleSubmit, errors } = useForm();

...

const updDetails = (data) => {
   console.log(data);    
}

return (
   <Form onSubmit={handleSubmit(updDetails)}>
      <FormGroup className="mr-10 mb-10">
         <Label for="compName" className="mr-sm-10">Company Name</Label>
         <Input type="text" name="compName" id="compName" placeholder="Company Name"
            ref={register({ required: true })} aria-invalid={errors.name ? "true" : "false"} …

我正在使用 Reactstrap Modal，有 ModalHeader，我在其中显示我的内容。但是当我尝试将该内容放在标题中心时，我遇到了问题。

在检查元素后，我发现 ModalHeader 中有一个<h5>标签，在这个标签内我的内容即将到来，我检查<h5>标签没有使用 Modal-Header 的完整宽度。我认为因为它没有位于中心。如果有人了解 Reactstrap Modal，请指导我如何将我的 Modal-Header 内容放在中心。提前致谢。

这是我的示例代码。

<ModalHeader toggle={props.toggle} > 
<div className="d-flex justify-content-center mb-2">
 <img src={myImg} alt="img" className="imgSize" /> 
</div> 
<div className="d-flex justify-content-center"> 
<p>Hi <b>John -</b> here is my some text</p>
</div> 
</ModalHeader>