Reactjs 将日期（）与MaterialUI滑块组件集成

这就是我要做的

MaterialUI有一个可以与整数一起使用的滑块组件。我的理解是，它不允许小数或时间格式，除非它是以这种方式编程或以某种方式操纵的

一个普通的滑块看起来像这样

这是通过传递这些值来完成的

<Slider
    min={0}
    max={200}
    step={15}
    value={this.state.fromSlider}
    onChange={this.handleFromSlider}/>

其余的代码都在他们的文档中

我试图完成的是一个简单的概念，我想用它来选择一个介于（00:00和23:59）之间的时间，所以它看起来像这样

这是到目前为止我的代码

import React from 'react';
import { Row, Col } from 'react-flexbox-grid';
import Slider from 'material-ui/Slider';

class PlayerNetwork extends React.Component {

    constructor(props) {
        super(props);
        const min = new Date();
        const max = new Date();
        min.setHours(0, 0, 0, 0);
        max.setHours(0, 0, 0, 0);
        this.state = {
            min: min,
            max: max,
        };
    }
    state = {
        fromSlider: 0.5,
    };

    handleFromSlider = (event, value) => {
        this.setState({fromSlider: value});
    };

    handleChangeMin = (event, date) => {
        this.setState({
            min: date,
        });
    };

    handleChangeMax = (event, date) => {
        this.setState({
            max: date,
        });
    };

    render() {
        const { min, max } = this.state;
        return (
            <div>
                <Row>
                    <Col xs={4}>
                        <div>From:</div>
                        <div>{this.state.fromSlider}</div>
                    </Col>
                    <Col xs={8}>
                        <Slider
                            min={min}
                            max={max}
                            step={15}
                            value={this.state.fromSlider}
                            onChange={this.handleFromSlider}/>
                    </Col>
                </Row>
            </div>
        );
    }
}

module.exports = (PlayerNetwork);

从“React”导入React；
从'react flexbox grid'导入{Row，Col}；
从“材质ui/滑块”导入滑块；
类PlayerNetwork扩展了React.Component{
建造师（道具）{
超级（道具）；
const min=新日期（）；
const max=新日期（）；
最小设定小时数（0,0,0,0）；
最大设定小时数（0,0,0,0）；
此.state={
敏:敏,，
马克斯：马克斯，
};
}
状态={
fromSlider:0.5，
};
handleFromSlider=（事件、值）=>{
this.setState（{fromsloider:value}）；
};
handleChangeMin=（事件、日期）=>{
这是我的国家({
民:日期,，
});
};
handleChangeMax=（事件、日期）=>{
这是我的国家({
马克斯：日期，
});
};
render（）{
const{min，max}=this.state；
返回(
发件人：
{this.state.fromsloider}
);
}
}
module.exports=（PlayerNetwork）；

滑块只能采用数值最大值/最小值，或此处显示的显式值：。您应该使用任意的浮点最大值和最小值（如0到24），并在显示时将其转换为时间。@AndyRay根据所描述的示例，最好将0到1440的范围设置为一天中的分钟数。@AndyRay我喜欢这个想法，也喜欢加入浮点的想法，唯一的问题是整数从0到9。同时，从0到60分钟。当我改变min=0，max=23，step=0.1的值时，我最终得到1.7，1.8，1.9，2.7，2.8…等等。哪些不是一个表中的值timeframe@KenGregory，我很困惑。1440从何而来，以分钟为单位？@LOTUSMS一天24小时，每小时60分钟->24*60=1440。0-1440的范围可以转换为00:00（0）-23:59（1440）