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

Question

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

我正在使用 material-ui 版本“^0.18.7”。

请在下面找到完整的功能。我不确定如何实现这一点。我也明白 errorText 和 errorStyle 不是 DatePicker 的有效 Prop 。认为它适用于日期选择器，但事实并非如此。有没有办法实现这一目标。

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 是否为空(为了简短起见，我省略了不相关的 Prop ):

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