如何使用react-phone-input-2的PhoneInput组件显示错误消息？

嘿，我刚好对react-phone-input-2比较熟悉，来帮你理清这个问题：这个组件本身并没有内置的错误消息渲染功能。你用到的isValid属性确实能控制输入框的样式（比如你已经实现的红色边框），但defaultErrorMessage并不是用来在页面上显示的公开API——它只是组件内部验证逻辑里的默认提示文本，组件不会自动把这个文本渲染出来。

下面给你两个实用的解决方案：

方案1：直接在组件下方自定义错误消息 #

最省事的方式就是在PhoneInput组件后面，根据你的错误状态条件渲染错误文本，代码简单直观，不需要额外封装：

<div>
  <PhoneInput
    country={'ca'}
    value={this.state.phone}
    name="phone"
    onBlur={this.handleValidation}
    onChange={phone => this.setState({ phone })}
    isValid={!this.state.errors.phone} // 简化写法，和你原有逻辑一致
    inputProps={{ 
      name: 'phone', 
      required: true, 
    }}
  />
  {/* 条件渲染错误提示 */}
  {this.state.errors.phone && (
    <span style={{ color: 'red', fontSize: '0.875rem', marginTop: '4px', display: 'block' }}>
      {/* 可使用自定义错误文本，或设置默认提示 */}
      {this.state.errors.phone || "请输入有效的手机号码"}
    </span>
  )}
</div>

只要this.state.errors.phone存在（即验证不通过），就会显示红色的错误文本，样式你可以根据自己的UI需求调整。

方案2：封装高阶组件（HOC）实现复用 #

如果你需要在项目多个地方使用带错误提示的手机号输入框，可以封装一个HOC来复用逻辑，避免重复写相同的代码：

// 封装带错误提示的PhoneInput组件
const PhoneInputWithError = ({ error, errorMessage, ...props }) => {
  return (
    <div>
      <PhoneInput
        isValid={!error}
        {...props}
      />
      {error && (
        <span style={{ color: 'red', fontSize: '0.875rem', marginTop: '4px', display: 'block' }}>
          {errorMessage || "输入的手机号码无效"}
        </span>
      )}
    </div>
  );
};

// 之后使用这个封装好的组件即可
<PhoneInputWithError
  country={'ca'}
  value={this.state.phone}
  name="phone"
  onBlur={this.handleValidation}
  onChange={phone => this.setState({ phone })}
  error={this.state.errors.phone}
  errorMessage="请输入有效的加拿大手机号码"
  inputProps={{ 
    name: 'phone', 
    required: true, 
  }}
/>

这样你在其他地方使用时，只需要传入对应的错误状态和自定义错误消息就可以了，非常方便。

最后补充一句：你之前尝试的defaultErrorMessage，其实是组件内部用于自带号码格式验证的默认提示，但组件并没有提供公开的方式让这个文本显示在页面上，所以还是得自己手动处理错误消息的渲染哦。

内容的提问来源于stack exchange，提问作者Rusty