Material-UI Datepicker 无法显示错误/必需的消息

Question

我正在尝试在日期选择器上显示验证错误消息，就像我们使用 errorText 和 errorStyle 道具对 TextField 所做的一样，但验证错误消息不适用于 DatePicker。

我使用的是material-ui版本“^0.18.7”。

请在下面找到完整的功能。我不确定如何实现这一点。我也明白 errorText 和 errorStyle 不是 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." />

您应该知道DatePicker 中的onChange 回调仅在选择日期时触发，因此date 参数永远不会为空或未定义。换句话说，你永远不会进入下面的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} 
 >