javascript - Rsuite无法正常工作如何解决？反应JS

Question

大家好，我通过安装 rsuitenpm i rsuite并导入import "rsuite/dist/styles/rsuite-default.css"。问题是按钮或默认文本输入工作得很好，但是当我使用选择或日期选择器或与弹出或折叠有关的任何东西时，它们不会向我显示数据。就像我单击一个选择组件一样，即使我可以通过它们并选择，它也不会向我显示该选项！但它们是不可见的。

那是我的代码：

import { Container, Row, Col } from 'reactstrap'
import { DatePicker } from 'rsuite';
import "rsuite/dist/styles/rsuite-default.css"


export default class Forms extends Component {
    constructor(props){
        super(props)
        this.state={
        }
    }

    render() {
        return (
            <div>
                <Container fluid>
                    <Row className="Col_margin py-4 px-1">
                         <Col className="Col_margin px-1" md={6}>
                            <label>name</label>
                            <DatePicker block/>
                         </Col>
                    </Row>
                    
                </Container>
                
            </div>
        )
    }
}```

这就是它向我展示的方式，我可以点击它并选择日期，但我什么也没看到，我有点盲目地选择了

应该是这样的，显示日期选项和按钮确定

我想告诉你，在第一张图片中，日期表不可见，但在那里，就像我移动鼠标并随机单击日期出现在表格上但它只是不显示，我知道如何向你显示，因为它只是不在那里 xD

标签： javascriptreactjs

Answer 1

我建议在沙箱中测试您的代码。我已经创建了代码框链接。这可能是其他一些可能的原因。

import React, { Component } from "react";
import { Container, Row, Col } from "reactstrap";
import { DatePicker } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default class Forms extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <Container fluid>
          <Row className="Col_margin py-4 px-1">
            <Col className="Col_margin px-1" md={6}>
              <label>name</label>
              <DatePicker block />
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

输出：