Question

我无法从函数访问道具。

这是我的代码（包含所有这些内容的组件也是一个函数）：

const [anchorEl, setAnchorEl] = React.useState(null);

function handleClick(event) {
    setAnchorEl(event.currentTarget);
}

function handleClose(val) {
    setAnchorEl(null);
    this.props.updateSelected(val)
}

return (
    <div>
        <IconButton onClick={handleClick}>
            <FilterListIcon/>
        </IconButton>
        <Menu
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
        >
            <MenuItem onClick={() => {handleClose(1).bind(this)}}>Содержит текст</MenuItem>
            <MenuItem onClick={() => {handleClose(2)}}>Не содержит текст</MenuItem>
            <MenuItem onClick={() => {handleClose(3)}}>Начинается с</MenuItem>
            <MenuItem onClick={() => {handleClose(4)}}>Заканчивается на</MenuItem>
        </Menu>
    </div>

如您所见，我尝试了绑定，但是没有用。

这是我将这个道具从另一个组件传递到组件的方法：

<FilterOptions updateSelected={this.updateSelectedValue}/>

道具本身：

updateSelectedValue = async (val) => {
    await this.setState({selectedValue: val});
    console.log(this.state.selectedValue)
};

Answer 1

您可以从功能组件参数中解构prop。而且由于所有其他功能都在组件内部定义，因此您可以从任何地方访问该道具。

我将为您的组件命名为Test：

const Test = ({ updateSelected }) => {

    const [anchorEl, setAnchorEl] = React.useState(null);

    function handleClick(event) {
        setAnchorEl(event.currentTarget);
    }

    function handleClose(val) {
        setAnchorEl(null);
        updateSelected(val)
    }

    return (
        <div>
            <IconButton onClick={handleClick}>
                <FilterListIcon/>
            </IconButton>
            <Menu
                id="simple-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
            >
                <MenuItem onClick={() => {handleClose(1).bind(this)}}>Содержит текст</MenuItem>
                <MenuItem onClick={() => {handleClose(2)}}>Не содержит текст</MenuItem>
                <MenuItem onClick={() => {handleClose(3)}}>Начинается с</MenuItem>
                <MenuItem onClick={() => {handleClose(4)}}>Заканчивается на</MenuItem>
            </Menu>
        </div>

}

功能如何访问道具？

1 个答案: