如何从父元素获取子元素状态

Question

我有一个 SortSelect(child) 组件，我想将其放入我的 Home(parent) 组件中。

export default function SortSelect() {
    const classes = useStyles();
    const [sortType, setSortType] = useState('asc');
    const handleChange = (event) => {
        setSortType(event.target.value);
    };

    return (
            <FormControl className={classes.formControl}>
                <Select
                    value={sortType}
                    onChange={handleChange}
                    displayEmpty
                    className={classes.selectEmpty}
                    inputProps={{ 'aria-label': 'Without label' }}
                >
                    <MenuItem value='asc'>Count asc</MenuItem>
                    <MenuItem value='desc'>Count desc</MenuItem>
                    <MenuItem value='a-z'>Name A-Z</MenuItem>
                    <MenuItem value='z-a'>Name Z-A</MenuItem>
                </Select>
                <FormHelperText>Sort by</FormHelperText>
            </FormControl>
    );
}

我需要获取 SortSelect 的 sortType 状态，以便对我的数组进行排序。我该怎么做？

Answer 1

这听起来确实不像是您应该使用 React 实现的模式。如果父组件需要那个状态，那么它应该处理它并将状态作为 prop 传递给 SortSelect.

如果它只是暂时需要 sortType 而不是让它处于它的状态，那么你可以简单地将回调从 Home 传递到 SortSelect ，它在 [=10= 中调用]的handleChange函数。

请注意，可以使用 React 的 useImperativeHandle 钩子将状态公开给父组件，但除非您 100% 确定自己在做什么，否则您真的不应该使用它。

如何从父元素获取子元素状态

How to get child's element state from parent

javascript

parent-child

reactjs

react-hooks