Question

我有一个具有一系列汽车的react组件，我正在显示带有所有汽车名称的标签列表，我希望默认列表仅显示柴油汽车。然后，我希望复选框在单击以显示所有汽车时切换showall（默认为false）

interface ICars
{
    name: string;
    isDiesel: boolean;
    key: string
}

let cars: ICar[];

const carLabels = () => {
    const carQuery = getData<ICarWrapper>({ query: QUERY, variables: {} });
    cars = (carQuery as IServiceLoaded<ICarWrapper>).payload?.cars;
    const classes = useStyles();
    return(
        <>
            <FormControlLabel control={<Checkbox name="checkedC" />} label="Show All" />
            <Paper elevation={0} className={classes.paperRoot}>
            { ! carQuery.loading &&
                    cars?.filter(x => x.isDiesel).map((car: ICar, idx: number) =>
                <Chip key={idx} size="small" className={classes.chip} color="primary" label={car.name} avatar={<Avatar>{car.key}</Avatar>}/>
                )
            }
        </Paper>
        </>
    );
};

export default carLabels;

我所缺少的是使用usestate，然后切换复选框以显示全部还是仅显示柴油，具体取决于是否已选中？

Answer 1

您必须使过滤器取决于复选框的选择，并在useState中跟踪当前复选框。

const carLabels = () => {
    const [filterDiesel, setFilter] = React.useState(true);
    const carQuery = getData<ICarWrapper>({ query: QUERY, variables: {} });
    cars = (carQuery as IServiceLoaded<ICarWrapper>).payload?.cars;
    const classes = useStyles();
    if(cars  && filterDiesel) {
        cars = cars.filter(car => car.isDiesel);
    }
    return(
        <>
            <FormControlLabel control={<Checkbox
                checked={(e: React.ChangeEvent<HTMLInputElement>) => {setFilter(e.target.checked}}
                value={filterDiesel}
                name="checkedC" />}label="Show All" />
            <Paper elevation={0} className={classes.paperRoot}>
            { ! carQuery.loading &&
                    cars?.map((car: ICar, idx: number) =>
                <Chip key={idx} size="small" className={classes.chip} color="primary" label={car.name} avatar={<Avatar>{car.key}</Avatar>}/>
                )
            }
        </Paper>
        </>
    );
};

基于复选框切换标签列表反应

1 个答案: