Javascript 反应物料ui日期选择器和时间选择器不显示

我已经开始使用ui正在考虑使用DatePicker和TimePicker的材料。我不知道这是一个bug还是我做错了什么，但在到处搜索之后，我无法让这两个组件正常工作。它们根本不显示，当我点击它们时，什么也不会发生，当我点击它们时，它不会聚焦它们

我还调用了

injectTapEventPlugin（）在my app.js的开头

 <DatePicker
        hintText="Test"
        value={this.state.startDate}
        onChange={this.handleChange}
     />



 <TimePicker
          ref="picker12hr"
          format="ampm"
          hintText="test"
          onChange={this.handleTimeChange}
        />



代码如下：

var React = require('react');
var ReactDom = require('react-dom');
var ReactBootstrap = require('react-bootstrap');
import TimePicker from 'material-ui/TimePicker';

var TimeValidateField = React.createClass({
    getInitialState: function() {
        return {
            errorText:'',
            floatingLabelStyle: { color : this.props.labelColor },
            underlineStyle: { borderColor : this.props.borderColor },
            hintStyle:{ color : 'transparent' }
        }
    },
    saveValues: function(e) {
        if (e.target.value === '' || e.target.value === 'null') {
            var red = '#F44336'
            var floatingLabelStyle = { color : red};
            var underlineStyle = { borderColor : red};
            this.setState({errorText: 'Ce champ est requis', floatingLabelStyle:floatingLabelStyle, hintStyle:floatingLabelStyle, underlineStyle:underlineStyle});
        } else {
            var floatingLabelStyle = { color : this.props.labelColor };
            var underlineStyle = { borderColor : this.props.borderColor };
            var hintStyle = { color : 'transparent' };
            this.setState({errorText: '', floatingLabelStyle:floatingLabelStyle, hintStyle:floatingLabelStyle, underlineStyle:underlineStyle});
            this.props.saveValues(e.target.id, e.target.value);
        }

    },
    render: function() {
        const styles = {
            underlineStyle: {

            },
            hintStyle: {
                color: 'transparent'
            },
            floatingLabelStyle: {

            }
        };
        var error = this.state.error === true
            ? <div className="validation-error">{this.state.errorLabel}</div>
            : <div></div>;

        return (
            <div className={this.props.className}>
            <TimePicker onChange={this.saveValues} id={this.props.label} floatingLabelStyle={this.state.floatingLabelStyle} underlineFocusStyle={this.state.underlineStyle} className={'col-md-12'} ref={'picker24hr'} hintStyle={this.state.hintStyle} hintText={this.props.label} errorText={this.state.errorText} floatingLabelText={this.props.label}></TimePicker>
            </div>
        )
    }
});

module.exports = TimeValidateField;

var React=require（'React'）；
var ReactDom=require（'react-dom'）；
var ReactBootstrap=require（'react-bootstrap'）；
从“物料界面/时间选择器”导入时间选择器；
var TimeValidateField=React.createClass({
getInitialState:函数（）{
返回{
错误文本：“”，
浮动标签样式：{color:this.props.labelColor}，
下划线样式：{borderColor:this.props.borderColor}，
hintStyle:{color:'transparent'}
}
},
保存值：函数（e）{
如果（e.target.value==''| | e.target.value==='null'）{
变量red='#F44336'
var floatingLabelStyle={color:red}；
var underlineStyle={borderColor:red}；
this.setState（{errorText:'Ce champ est requires'，floatingLabelStyle:floatingLabelStyle，hintStyle:floatingLabelStyle，underlineStyle:underlineStyle}）；
}否则{
var floatingLabelStyle={color:this.props.labelColor}；
var underlineStyle={borderColor:this.props.borderColor}；
var hintStyle={color:'transparent'}；
this.setState（{errorText:''，floatingLabelStyle:floatingLabelStyle，hintStyle:floatingLabelStyle，underlineStyle:underlineStyle}）；
this.props.saveValues（e.target.id，e.target.value）；
}
},
render:function（）{
常量样式={
下划线样式：{
},
辛茨风格：{
颜色：“透明”
},
浮动标签样式：{
}
};
var error=this.state.error==true
？{this.state.errorLabel}
: ;
返回(
)
}
});
module.exports=TimeValidateField；

这是给日期选择器的

var React = require('react');
var ReactDom = require('react-dom');
var ReactBootstrap = require('react-bootstrap');
var moment = require('moment');
import DatePicker from 'material-ui/DatePicker';

var DateValidateField = React.createClass({
    getInitialState: function() {
        return {
            errorText:'',
            floatingLabelStyle: { color : this.props.labelColor },
            underlineStyle: { borderColor : this.props.borderColor },
            hintStyle:{ color : 'transparent' },
            startDate : null,
        }
    },
    saveValues: function(e) {
        if (e.target.value === '' || e.target.value === 'null') {
            var red = '#F44336'
            var floatingLabelStyle = { color : red};
            var underlineStyle = { borderColor : red};
            this.setState({errorText: 'Ce champ est requis', floatingLabelStyle:floatingLabelStyle, hintStyle:floatingLabelStyle, underlineStyle:underlineStyle});
        } else {
            var floatingLabelStyle = { color : this.props.labelColor };
            var underlineStyle = { borderColor : this.props.borderColor };
            var hintStyle = { color : 'transparent' };
            this.setState({errorText: '', floatingLabelStyle:floatingLabelStyle, hintStyle:floatingLabelStyle, underlineStyle:underlineStyle});
            this.props.saveValues(e.target.id, e.target.value);
        }

    },
    render: function() {
        const styles = {
            underlineStyle: {

            },
            hintStyle: {
                color: 'transparent'
            },
            floatingLabelStyle: {

            }
        };
        var error = this.state.error === true
            ? <div className="validation-error">{this.state.errorLabel}</div>
            : <div></div>;

        return (
            <div className={this.props.className}>
            <DatePicker value={this.state.startDate} onChange={this.saveValues} id={this.props.label} floatingLabelStyle={this.state.floatingLabelStyle} underlineFocusStyle={this.state.underlineStyle} style={{
                'width': '100%'
            }} className={'col-md-12'} hintStyle={this.state.hintStyle} hintText={this.props.label} errorText={this.state.errorText} floatingLabelText={this.props.label}></DatePicker>
            </div>
        )
    }
});

module.exports = DateValidateField;

var React=require（'React'）；
var ReactDom=require（'react-dom'）；
var ReactBootstrap=require（'react-bootstrap'）；
var力矩=要求的（‘力矩’）；
从“物料界面/日期选择器”导入日期选择器；
var DateValidateField=React.createClass({
getInitialState:函数（）{
返回{
错误文本：“”，
浮动标签样式：{color:this.props.labelColor}，
下划线样式：{borderColor:this.props.borderColor}，
hintStyle:{color:'transparent'}，
startDate:null，
}
},
保存值：函数（e）{
如果（e.target.value==''| | e.target.value==='null'）{
变量red='#F44336'
var floatingLabelStyle={color:red}；
var underlineStyle={borderColor:red}；
this.setState（{errorText:'Ce champ est requires'，floatingLabelStyle:floatingLabelStyle，hintStyle:floatingLabelStyle，underlineStyle:underlineStyle}）；
}否则{
var floatingLabelStyle={color:this.props.labelColor}；
var underlineStyle={borderColor:this.props.borderColor}；
var hintStyle={color:'transparent'}；
this.setState（{errorText:''，floatingLabelStyle:floatingLabelStyle，hintStyle:floatingLabelStyle，underlineStyle:underlineStyle}）；
this.props.saveValues（e.target.id，e.target.value）；
}
},
render:function（）{
常量样式={
下划线样式：{
},
辛茨风格：{
颜色：“透明”
},
浮动标签样式：{
}
};
var error=this.state.error==true
？{this.state.errorLabel}
: ;
返回(
)
}
});
module.exports=DateValidateField；
你能把你的整个组件发布到你使用它们的地方吗？@AvraamMavridis编辑过，不过可能有一些垃圾