Question

我创建了一个自动填充组件，该组件依赖于父自动填充的选定值。

这很好用。当我键入或悬停以便选择时，两者都按预期工作。

const [hoverd, setHoverd] = useState(false);
const onMouseOver = () => setHoverd(true);
const onMouseOut = () => setHoverd(false);

  <div onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
                <Card className={classes.paper} raised={hoverd}>
           <Grid item>
                        <Autocomplete
                            id="filter-by"
                            className={classes.search}
                            options={filterBy}
                            value={filterByValue}
                            onChange={(event, newValue) => {
                                setFilterByValue(newValue)
                            }}
                            renderInput={(params) =>
                                <TextField {...params}
                                    variant="outlined"
                                    label="Search by: ?"
                                    InputProps={{
                                        ...params.InputProps,
                                    }}
                                />}
                        />
                    </Grid>
                    {filterByValue === 'Campaign' ? <Grid item>
                        <Autocomplete
                            id="filter-by-campaign"
                            className={classes.search}
                            options={campaignData}
                            getOptionLabel={(option) => option.campaign}
                            renderInput={(params) =>
                                <TextField {...params}
                                    variant="outlined"
                                    label="Search by: campaign"
                                />}
                        />
                    </Grid> : <div />}

当我将代码移至单独的组件时，则无法正常工作。我可以输入，但悬停选项不起作用。

{filterByValue === 'Campaign' ? <FilterByCampaign /> : <div />}

const FilterByCampaign = () => {
    return <Grid item>
        <Autocomplete
            id="filter-by-campaign"
            className={classes.search}
            options={campaignData}
            getOptionLabel={(option) => option.campaign}
            renderInput={(params) =>
                <TextField {...params}
                    variant="outlined"
                    label="Search by: campaign"
                />}
        />
    </Grid>
   }

我不明白这两者之间有什么区别。

有什么主意吗？

谢谢

Answer 1

尝试将onMouseOver函数作为道具传递给子组件，然后传递给输入

{filterByValue === 'Campaign' ? <FilterByCampaign onMouseOver={onMouseOver} /> : <div />}

const FilterByCampaign = ({ onMouseOver }) => {
    return <Grid item>
        <Autocomplete
            id="filter-by-campaign"
            className={classes.search}
            options={campaignData}
            getOptionLabel={(option) => option.campaign}
            onMouseOver={onMouseOver} // depending on what the onMouseOver does either here
            renderInput={(params) =>
                <TextField 
                    {...params}
                    onMouseOver={onMouseOver} // or here
                    variant="outlined"
                    label="Search by: campaign"
                />}
        />
    </Grid>
   }

自动完成悬停无法正确响应

1 个答案: