const Count = () => {
const [count, setCount] = useLocState('count', 0)
return (
<div className={styles.box1} >
<div onClick={e => {setCount(count - 1)}}>-</div>
<input
type="number"
value={count}
onChange={e => {
setCount(+e.target.value)
}} />
<div onClick={e => {setCount(count + 1)}}>+</div>
</div>
)
}
const Count2 = () => {
const [count, setCount] = useLocState('count', 0)
const [countlist, setCountList] = useLocState<number[]>('countlist', [])
return (
<>
<CountHistory />
<div className={styles.box1} >
<div onClick={e => {
setCount(count - 1)
setCountList([...countlist, count])
}}>-</div>
<input
type="number"
value={count}
onChange={e => {
setCount(+e.target.value)
}} />
<div onClick={e => {
setCount(count + 1)
setCountList([...countlist, count])
}}>+</div>
</div>
</>
)
//子组件不接受任何props 只是读取localStorage中的数据
const CountHistory = () => {
const countlist:number[] = useLocValue("countlist");
const ref:any = useRef(null);
useEffect(()=>{
ref.current.scrollTop = ref.current.scrollHeight;
})
return (
<div ref={ref} className={styles.box2} >
{
countlist?.map((item, index) => {
return (
<div key={index}>{item}</div>
)
})
}
</div>
)
}