在React中，由于数据不可变性 若需要更改 则需要通过通知父元素 来更新子元素的数据
如我们需要通过点击事件 来更改子元素相应的样式
那么首先我们现在父元素中利用useState来进行数据的更改 给父元素传一个selected 用来作为可更改的数据 传一个onSelected来更改数据
const [timeRange ,setTimeRange] = useState('thisMonth')
<TimeRangePick selected={timeRange} onSelected ={setTimeRange}/>
我们将要被点击的数据放到数组里面 然后利用map遍历 给每一项都添加一个点击事件 每当点击的时候 我们都调用引入的onselected 也就是把父元素中的selected赋值为我们现在点击的数据 然后我们进行判断 是否这个时候的selected就是我们当前点击的数据 如果是就改变当前样式
import React from "react";
import s from './TimeRangePicker.module.scss'
interface Props {
selected: string ,
onSelected: (selected : TimeRanges) => void
}
export type TimeRanges = 'this month' | 'last month' |'last year'|'diy time';
export const TimeRangePick:React.FC<Props> = ({ selected , onSelected }) =>{
const TimeRange :{key: TimeRanges ,text:string}[] = [
{key: 'this month' , text: '本月'},
{key: 'last month' , text: '上月'},
{key: 'last year' , text: '去年'},
{key: 'diy time' , text: '自定义事件'}
]
return <ol flex flex-row children-px-24px children-py-16px cursor-pointer>
{TimeRange.map(tr => <li pointer-cursor className={tr.key === selected ? s.selected : '' } onClick={() => onSelected(tr.key)} key={tr.key}>{tr.text}</li>)}
</ol>
}
其实就相当于父元素提供了 一个读 一个写的接口
