Reactjs MS Office界面-提交表单时，如何在日期选择器上显示所需的错误消息？

我想在提交表单时在日期选择器上显示一条错误消息，但我找不到这样做的方法

isRequiredErrorMessage仅当字段失去具有空值的焦点时才起作用

但是，如果用户从不关注日期选择器字段，则我无法将消息设置为错误标签

我希望DatePicker可以有errorMessage，这样我就可以像

render() {
  return (
    <DatePicker
      label="Pick up date"
      isRequired={true}
      minDate={moment().toDate()}
      onSelectDate={(date) => {this.setState({pickUpDate: date})}}
      strings={DayPickerStrings}
      errorMessage={this.state.pickUpDateErrorMessage}
    />
  );
}

onSubmitForm() {
  if (isNaN(this.state.pickUpDate)) {
    this.setState({
      pickUpDateErrorMessage: "Can't be empty"
    })
  }
}

render（）{
返回(
{this.setState（{pickUpDate:date}}}
strings={DayPickerStrings}
errorMessage={this.state.pickUpDateErrorMessage}
/>
);
}
onSubmitForm（）{
if（isNaN（this.state.pickUpDate））{
这是我的国家({
pickUpDateErrorMessage：“不能为空”
})
}
}

---

请建议如何在表单提交时验证datePicker组件。

看起来您正在使用TypeScript。尝试使用您自己的具有

errorMessage

属性的类扩展DatePicker类

export class MyDatePicker extends DatePicker {
    public constructor(props: {}) {
        super(props);
    }

    errorMessage: string = '';
}

---

然后调用您自己的MyDatePicker组件来代替原来的DatePicker组件。

我同样需要在DatePicker上显示错误消息，并希望在office fabric ui中的其他输入组件中使用类似的errorMessage API。 我最终发现Datepicker是textfield属性，因为它本质上使用textfield，所以您可以向它传递ITextFieldProps

样品溶液：-

---

感谢Rick的回复，我正在使用Java脚本（es6），office react fabric UI作为日期选择器组件。正如您所建议的，我们将实施此解决方案并让您知道。