javascript - React-rangeslider 不显示在引导模式上

Question

我正在尝试将 slider 放在引导模式上，但它似乎对我不起作用:我只是将 slider 的默认值打印在屏幕上。 screenshot

滑动条组件嵌套在模态组件内部。模态组件:

import React from 'react';
import {Modal, Button} from 'react-bootstrap';
import Horizontal from './horizontal-slider';
import ReactDOM from 'react-dom';
export default class LocationModal extends React.Component{
    constructor(props){
        super(props);
        this.state={cordinates: props.cordinates, showModal:props.showModal}
        this.toggleModal = this.toggleModal.bind(this);
    }

    toggleModal(){
        this.setState({showModal:! this.state.showModal});
    }

    getInitialState() {
        return { showModal: false };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({ cordinates: nextProps.cordinates, showModal:nextProps.showModal });
    }

    render(){
        var coorString =this.state.cordinates[1]+","+this.state.cordinates[0];
        var link = "https://maps.googleapis.com/maps/api/staticmap?center="+
            coorString+
            "&size=800x800&zoom=17&markers=color:red%7Clabel:C%7C" +
            coorString;

            return(
                <Modal show={this.state.showModal} onHide={this.toggleModal} bsSize="large">
                    <Modal.Header closeButton>
                        <Modal.Title id="modal-header" className="text-center">
                            Google Maps
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Horizontal />
                        <img src={link} className="img-responsive" width="100%"/>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={()=>{this.toggleModal()}}>Fermer</Button>
                    </Modal.Footer>
                </Modal>
            );
    }
}

slider 组件:

import React, { Component } from 'react'
import Slider from 'react-rangeslider'
export default class Horizontal extends Component {
    constructor (props, context) {
        super(props, context)
        this.state = {
            value: 0
        }
    }

    handleChange = (value) => {
        this.setState({
            value: value
        })
    }

    handleChangeComplete = (e) => {
        console.log('Change event completed')
    }

    render () {
        const { value } = this.state
        return (
            <div className='slider'>
                <Slider
                    min={0}
                    max={100}
                    value={value}
                    onChange={this.handleChange}
                    onChangeComplete={this.handleChangeComplete}
                />
                <div className='value'>{value}</div>
            </div>
        )
    }
}

Answer 1

我只需在 slider 的类中导入 css 文件。

import 'react-rangeslider/lib/index.css';