材料UI日期选择器无法显示错误/必需消息

Question

我试图在日期选取器上显示验证错误消息，就像我们使用错误文本和错误样式属性对TextField执行的操作一样，但验证错误消息不适用于日期选择器。

我用的是素材-ui版“^0.18.7".

请在下面找到完整的功能。我不确定如何实现这个。我也知道errorText和errorStyle不是DatePicker的有效道具。我以为它适用于datepicker，但事实并非如此。有没有办法实现这一点。

import DatePicker from 'material-ui/DatePicker';

constructor(props){
   super(props)
   const dateYesterday = new Date();
   dateYesterday.setDate(dateYesterday.getDate() - 1);
   this.state={
      dob: null,
      dobError: '',
      dateYesterday: dateYesterday
   }
   this.changeDateOfBirth = this.changeDateOfBirth.bind(this)
}

changeDateOfBirth = (evt, date) => {
if(date == null || date == undefined){
  this.setState({
    dobError: 'Please select your date of birth'
  });
}else{
  this.setState({
    dobError: '',
    dob: date
  });
}
}
const errorStyle = {
    display: 'table'
}

<DatePicker 
    dialogContainerStyle={{position: 'absolute'}} 
    errorText={this.state.dobError} 
    errorStyle={errorStyle} 
    inputStyle={myTheme.inputStyleText} 
    underlineStyle={myTheme.underlineStyle} 
    underlineFocusStyle={myTheme.underlineStyle} 
    floatingLabelStyle={myTheme.floatingLabelStyle} 
    floatingLabelText="Date Of Birth" 
    hintText="Select Date Of Birth" 
    container="inline" 
    locale="en-US" 
    firstDayOfWeek={0} 
    autoOk={true} 
    value={this.state.dob} 
    onChange={this.changeDateOfBirth} 
    defaultDate={this.state.dateYesterday}
 >
 </DatePicker>

请建议。

Answer 1

DatePicker将道具传播到子元素，因此您实际上可以使用TextField元素中的errorText和errorStyle道具。例如，我在“^0.18.7”中测试了以下DatePicker，并且可以确认它显示了一条红色的错误消息：

<DatePicker hintText="Portrait Dialog" errorText="This is an error message." />

您应该知道，日期选取器中的 onChange 回调仅在选择日期时触发，因此 date 参数永远不会为 null 或未定义。换句话说，您永远不会输入以下 if 语句：

if(date == null || date == undefined){
  this.setState({
    dobError: 'Please select your date of birth'
  });
}

如果你想检查用户没有设置任何类型的日期的情况，考虑只检查你的DOB是否为空（我省略了不相关的道具以保持简短）：

<DatePicker 
    errorText={this.state.dob ? {} : this.state.dobError} 
    errorStyle={this.state.dob ? {} : errorStyle} 
 >