Review代码➕自我总结➕下一阶段任务（Day：54）

Review代码

项目地址：https://github.com/XJQ124/Meeting-Demo github在线地址:https://xjq124.github.io/Meeting-Demo/

Review代码这次没有犯什么错误

总结本次的内容 input里文字手机号码的变换，这里用了几个状态去联动控制，之前没有写过这么复杂的。包括边框的颜色 1、单纯的移动，加聚焦以后边框的颜色显示和消失 1.1首先设置两个状态

    const [isFocus, setIsFocus] = useState(false) 
    const [mobile, setMobile] = useState()

1.2当你点击Input框

   onFocus={() => { setIsFocus(true); setPhoneError(null); }}

1.3确认聚焦

  <span className={`text-number ${isFocus ? 'text-focus' : 'text-none'} ${phoneError ? 'text-error' : ''}`}>手机号码</span>

这里根据是否聚焦来判断样式，如果is则上移，否则则下移

然后边框的颜色,是通过更改全局变量来做的。这个方法我还是第一次用的这么细节，蛮好的。

  <ConfigProvider theme={{ token: { colorPrimary: '#F0C54F' } }} >
  </ConfigProvider>

文字向上移动以后的颜色，是通过css（text-focus）写好的

1.4取消聚焦则用的text-error

2、电话号码的校验

    const [phoneError, setPhoneError] = useState(false)
    const verification = () => {
        const phoneNumber = /^1[3456789]\d{9}$/;
        if (!phoneNumber.test(mobile)) {
            setPhoneError(<><ExclamationCircleOutlined /> 请输入正确的11位手机号</>);
        } else {
            setPhoneError(null);
        }
    };

先做了个正则表达式来判断手机号的位数

如果手机号与输入框里通过mobile拿到的数据，经过数据匹配，不对的话，那么久提示输入错误然后我还加了一个错误的状态

3、报错样式的实现这里用了一个我之前没有用过的css样式

.text-number {
  position: fixed;
  margin-top: 48px;
  margin-left: 140px;
  z-index: 9999;
  width: 64px;
  height: 24px;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  color: rgba(161, 161, 161, 1);
  /* 禁用元素上的鼠标事件 */
  pointer-events: none;

  /* 校验错误后文字内容变红 */
  &.text-error {
    color: red;
    /* 设置文字错误状态时的颜色 */
  }
}

这种写法可以继承之前的所有样式，然后在内容错误的时候，把他变为红色

接下来，是出现那个错误的提示文字

{phoneError && <div className="error-text" >{phoneError}</div>}

用的是这种方法来实现，当检测错误的时候，上面的文字内容显示，且变红其他一些内容和这个类似实现

明日计划：开始做下一步的上传文件功能

XJQ124 / Some-notes

Review代码➕自我总结➕下一阶段任务（Day：54） #57

Review代码