只有当它插入文档以后,才会变成真实的 DOM
如果需要从组件获取真实 DOM 的节点,就要用到官方提供的ref属性
使用场景
当用户加载页面后, 默认聚焦到input框
import React, {...使用场景
为了更好的展示用户输入的银行卡号, 需要每隔四个数字加一个空格
实现思路:
当用户输入的字符个数, 可以被5整除时, 额外加一个空格
当用户删除数字时,遇到空格, 要移除两个字符(一个空格..., 一个数字),
为了实现以上想法, 必须获取键盘的BackSpace事件, 重写删除的逻辑
限制为数字, 隔四位加空格
?...if (event.key === "Backspace") {
// 如果以空格结尾, 删除两个字符
if (this.state.showTxt.endsWith(...this.state.showTxt+event.key})
}
}
render() {
return (
银行卡号 隔四位加空格