Reactjs 在由状态管理的react中屏蔽输入

我有一个代码，我试图屏蔽我的手机输入，使它看起来很好，下面是它如何格式化手机：

onPhoneChange = (e) => {
            const phone = e.target.value
            if(!phone || phone.match(/^\((\d{2})\) (\d{5})\-(\d{4})$/)){
                this.setState({ phone })
            }else if(!phone || phone.match(/^\d{1,11}?$/)){
                this.setState(() => ({ phone })) 
                if(this.state.phone || this.state.phone.match(/^\d{11}$/)){
                    let formattedPhone
                    let cleaned = ('' + phone).replace(/\D/g, '')
                    let match = cleaned.match(/^(\d{2})(\d{5})(\d{4})$/)
                    if (match) {
                        formattedPhone = `(${(match[1])}) ${match[2]}-${match[3]}`
                    }
                    this.setState({ phone: formattedPhone })
             }
        }
    }

输入的值就是状态，就像上面设置的一样，我认为setState函数是异步的，所以，当输入格式化时，它会在视觉上发生变化，但在内部会发生冲突。在不使用外部模块的情况下，我将如何解决这个问题

添加，这是输入：

<input
   value={this.state.phone}
   onChange={this.onPhoneChange}
/>

有许多屏蔽输入可用，例如react text mask。这些不是你的选择吗？我试过了，但当它与他们破坏的状态组件一起运行时，他们得到的第一个输入总是一个“”，一个似乎出错的输入。我会再试一次，但我想自己做点什么，改进我的脚本。有很多屏蔽输入可用，比如react text mask。这些不是你的选择吗？我试过了，但当它与他们破坏的状态组件一起运行时，他们得到的第一个输入总是一个“”，一个似乎出错的输入。我会再试一次，但我想自己做点什么，改进我的脚本。