Question

由于Material-UI v1.0.0还没有实现，因此我尝试使用TextFiel，Menu和MenuItem组件来实现我自己的选择。

这是我的代码：

export default class SelectField extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            anchorEl: undefined,
            open: false,
        };
    }

    handleClick = event => {
        this.setState({ open: true, anchorEl: event.currentTarget });
    };

    handleRequestClose = () => {
        this.setState({ open: false });
    };

    handleMenuItemClick = (event, index) => {
        this.setState({ open: false });
        this.props.onChange(index);
    };

    render(){
        const { style, name, label, value, onChange, children } = this.props;

        return (
            <div>
            <TextField style={style} onClick={this.handleClick} type="text" name={name} label={label} value={value} InputProps={{ placeholder: label }} />
                <Menu open={this.state.open} anchorEl={this.state.anchorEl} onRequestClose={this.handleRequestClose} >
                    {children.map((key) =>
                        <MenuItem key={key.value} selected={key.value === this.props.value} onClick={event => this.handleMenuItemClick(event, key.  value)} >
                            {key.name}
                        </MenuItem>,
                    )}
                </Menu>
            </div>          
        );
    }
}

现在，当我尝试定位菜单时，我遇到了第一个问题。在Material-UI文档中，我看到他们使用属性anchorEl将菜单放在打开它的元素前面。好的，直到您使用包含大量项目的选定属性才能正常工作。而且我还希望将菜单的位置调整为TextField的下方。

但也不是那么重要。我想将菜单的宽度设置为TextField的宽度，并且我想通过写菜单来允许搜索。

Answer 1

我昨天遇到了关于菜单定位的同样问题。签出Menu.js的源代码后，我发现Menu Component由内部Popover组件包装。因此，您可以将 anchorOrigin 道具传递给菜单组件，实现自定义定位。但在我的测试中，它只能收到anchorOrigin道具。传递targetOrigin道具时会出错，所以我想弄明白。

实现SelectField for Material-UI v1.0.0-alpha.21 - 菜单anchorEl问题

1 个答案: