如何在功能中访问道具?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (17)

从功能访问道具我有问题。

这是我的代码(包含所有这些的组件也是一个函数):

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>

我已经尝试过绑定,但它没有用。

以下是我将此prop从另一个组件传递给组件的方法:

<FilterOptions updateSelected={this.updateSelectedValue}/>

而道具本身:

updateSelectedValue = async (val) => {
    await this.setState({selectedValue: val});
    console.log(this.state.selectedValue)
};
提问于
用户回答回答于

您可以从功能组件参数中构造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>

}

扫码关注云+社区

领取腾讯云代金券