八月我学到了什么

~~对数字列表或二级block的显示有问题，先放下原文在这里，后续会修复下这个bug(已修复）~~

2022.08.3

使用 <datalist> 实现 <input> 的 autocomplete

为 <input> 标签的 list 属性指定一个 id ，该 id 对应一个包含 <option> 的 <datalist> 标签作为 autocomplete 的数据来源。

https://codesandbox.io/embed/relaxed-forest-kkhd3d?fontsize=14&hidenavigation=1&theme=dark

2022.08.04

CSS父选择器 :has()
表单校验通过伪类 :valid 和未通过伪类 :invalid

使用 @property 自定义CSS属性

使用 CSS 语法定义

/* 定义属性 */
@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

/* 修改属性 */
--my-color: #ffffff;

使用 DOM 语法定义

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#c0ffee',
});

2022.08.05

React Controlled Input 中的数字输入问题

非预期字符处理：

当 <input> 标签的 type 被设置为 number 时，用户可以输入科学记数法的 e ，一开始尝试在 onChange 事件中将 e 匹配并去除，input 的 value 属性确实显示为 ‘’ ，但界面并没有更新。

但其实可输入的非预期字符还要多 ['e', 'E', '+', '-']

解决方法：
```
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    const exceptThisSymbols = ['e', 'E', '+', '-', '.'];
    return exceptThisSymbols.includes(e.key) && e.preventDefault();
  };
```
限制小数输入位数：

在 onChange 事件中
```
const handleInputChange = (e: changeEvnet<HTMLInputElement>) => {
	let value = e.target.value;
	//...
	value = value.replace(/\\D*(\\d*)(\\.?)(\\d{0,2})\\d*/, '$1$2$3');
	//...
}
```
input 标签
```
<input pattern="[0-9]*.?[0-9]{0,2}" />
```
onBlur 时去掉末尾的 . :

当 input 标签为 number 时，末尾的 . 字符并不会被算在 value 中，因此也不会被 state 记录，所以这个 . 就处在一个非法地带。

所以去除它并不能通过简单的更新。而是需要先将值置空，再重新赋值。而且因为 React18 中的更新合并，还需要使用 flushSync 来使两次赋值生效。
```
const [value,setValue] = useState();

const handleInputBlur = (e: FocusEvent<HTMLInputElement>) => {
		let preVal = value;
    flushSync(() => {
      setValue('');
    });
    setValue(preVal);
}
```

2022.08.05

git 中的 tag 有什么用

tag 一般被用来标记“版本”，虽然每个 commit 都有自己的消息体，但要找到某个特定的 commit 还是太麻烦了。所以 tag 类似于给特定的 commit 取一个别名。
- 查看所有的标签：git tag
- 创建标签：git tag [tagname]
- 删除标签：git tag [tagname] -d
- 查看标签内容：git cat-file -p [tagname]
如何单独合并某一个 commit

git cherry-pick [commit]
盐酸多西环素和盐酸左氧氟沙星

前者是治疗皮肤的，对喉咙有腐蚀性，后者是抗生素，治疗炎症。

名字很像，不要吃错。

2022.08.08

offset 属性

CSS3 新增属性 offset 可以让元素沿着指定的路径进行运动。

offset-anchor ：指定元素运动的中心。

offset-position ：指定元素运动的起始位置。

offset-path : 指定元素在路径上的位置。

offset-distance : 指定元素在路径上的位置。

offset-rotate ：指定元素运动时的指向。
在 CSS 中单独使用 SVG 中的某个元素
```
mask: url(foo.svg#id);
```
mask 属性

使用位图或 SVG 元素为目标元素添加遮罩蒙版，可以指定只显示蒙版部分或截去蒙版部分。
useCallback 搭配 memo 使用

当组件重新渲染时，虽然 useCallback不会重新执行，但子组件还是会重新渲染。所以使用 React.memo 包裹组件，这样在 useCallback 的返回函数不变的情况下，子组件也不会重新渲染。

2022.08.3

2022.08.04

2022.08.05

2022.08.05

2022.08.08

2022.08.09