如何使用react-phone-input包中的PhoneInput显示错误信息？

Question

我正在使用react-phone-input-2包中的PhoneInput。我想知道它是否有一个内置的功能来显示错误消息。使用isValid属性，我已经能够在输入上显示红色边框，以防出现问题。但我仍然无法在字段下方显示错误消息。我使用了defaultErrorMessage属性，但如果发生错误，它不会显示。

有人能让我知道有一个内置的功能来显示错误消息，否则我将不得不为它创建一个自定义的即席？

<PhoneInput
  country={'ca'}
  value={this.state.phone}
  name="phone"
  onBlur={this.handleValidation}
  onChange={phone => this.setState({ phone })}
  defaultErrorMessage="It doesn't works, why?"
  isValid={this.state.errors.phone? false : true}
  inputProps={{
      name: 'phone',
      required: true,
     }}
  />

Answer 1

根据文档，您必须传递函数并返回字符串或布尔值，如下所示

<PhoneInput
  country={'ca'}
  value={this.state.phone}
  name="phone"
  onBlur={this.handleValidation}
  onChange={phone => this.setState({ phone })}
  defaultErrorMessage="It doesn't works, why?"
  isValid={(value, country) => {
    if (value.match(/12345/)) {
        return 'Invalid value: '+value+', '+country.name;
    } else if (value.match(/1234/)) {
        return false;
    } else {
        return true;
    }
  }}
  inputProps={{
      name: 'phone',
      required: true,
     }}
  />

如果返回false而不是此函数中的字符串，则会显示默认错误消息