Javascript 如何在react原生文本输入组件上处理输入验证？

我试图在我的

PhoneInput

组件上实现电话验证，但在抽象层上我有点迷茫和困惑

我有一个由3个组件组成的层次结构

State（自定义状态处理程序）->电话表单（电话表单）->电话输入（实际电话输入）

尝试过的事情：

通过

onBlur（）

事件对

PhoneInput

进行验证，但无法正确获取对象phone值；获取

[object object]

或

循环依赖关系

将验证放在

状态

组件中，但无法使我的状态正确更改

将整个

PhoneInput

重构到一个类中，该类不使用

state

组件，而处理

state

，但我的登录表单停止工作

所需行为：当我键入以

0开头的电话号码时，我希望从电话号码中删除该零

代码：（我已经从示例中删除了所有样式表、道具和导入，但留下了我试图做的注释）

State.js


…省略了\u代码
导出默认类状态扩展React.Component{
state=this.props.default
更新=值=>{
//[注]：第二次尝试
//const phoneValue=values.phone
//常数以零开始=/^0/
//如果（phoneValue==beginsWithZero）{
//const phoneFormatValue=phoneValue.replace（beginsWithZero，“”）
//返回此.setState（phoneFormatValue）
//}其他{
//返回此.setState（值）
// }
此.setState（值）
//[注意]：所有这些都有效，但我无法使用phoneFormattedValue更新状态
//log（`这是值：${JSON.stringify（values，null，2）}`）
//常数以零开始=/^0/
//const phoneValue=values.phone
//const phoneFormattedValue=phoneValue.replace（beginsWithZero，“”）
//log（`这是phoneValue:${phoneValue}`）
//log（`这是phoneFormatted:${phoneFormattedValue}`）
//log（`这是状态：${JSON.stringify（This.state，null，2）}`）
//formatPhoneValue=（）=>{}
this.props.onChange（{…this.state，…values}）
}
render（）{
const{children}=this.props
返回子项（this.state、this.update）
}
}
State.defaultProps={
默认值：{}，
onChange:（）=>{}，
}

PhoneForm.js

。省略了\u代码
const PhoneForm=（{locale，countryCode，countryCode，style，onChange，error}:Props）=>(
//[注]：我认为表格和更新会给我带来问题
{（表格，更新）=>(
)}
)
…省略了\u代码

PhoneInput.js

/[注意]：第一次尝试：尝试在组件本身内部处理验证，希望从'changeText（{countryCode，phone}）`中获取电话值，并格式化为onBlur
常量isValidPhoneNumber=值=>{
常量phoneRegex=/^0/
//const phoneformatted=phone.replace（phoneRegex“”）
//const phoneStartsWithZero=phone.startsWith（'0'））
//const phoneformatted=phoneStartsWithZero？phone.replace（phoneRegex，）：phone
//log（`${phone.startsWith（'0'）}以零开头。`）
//[注意]：返回未定义或[对象]
console.log（'这是value.phone'，value.phone）
console.log（'这是值'，值）
//log（`这是输入的电话电话：${phoneformatted}`）
//返回电话格式化
}
类型PhoneInputProps={
…省略了\u代码
}
常量PhoneInput=({
…省略了\u代码
}：PhoneInputProps）=>(
…省略了\u代码
onChangeText（{countryCode，phone}）}
onFocus={phone=>console.log（`I was focus，this the phone:${phone}`）}
onBlur={value=>isValidPhoneNumber（值）}
{…道具}
/>
)