Javascript 为材料UI v1.0.0-alpha.21实施SelectField-菜单主播发布

由于MaterialUIV1.0.0还没有实现selectField，我正在尝试使用TextField、Menu和MenuItem组件实现我自己的selectField

这是我的代码：

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>          
        );
    }
}

导出默认类SelectField扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
主持人：未定义，
开：错，
};
}
handleClick=事件=>{
this.setState（{open:true，ancorel:event.currentTarget}）；
};
HandlerRequestClose=（）=>{
this.setState（{open:false}）；
};
handleMenuItemClick=（事件、索引）=>{
this.setState（{open:false}）；
此.props.onChange（索引）；
};
render（）{
const{style，name，label，value，onChange，children}=this.props；
返回(
{children.map（（键）=>
this.handleMenuItemClick（事件，key.value）}>
{key.name}
,
)}
);
}
}

现在，当我尝试定位菜单时，我的第一个问题出现了。在MaterialUI文档中，我看到他们使用属性anchorEl将菜单放在打开它的元素前面。好的，在将选定属性与许多项一起使用之前，这一切都可以正常工作。我还想调整菜单的位置，使其位于文本字段的下方

---

但也没那么重要。我想将菜单的宽度设置为文本字段的宽度，还想允许通过写入菜单进行搜索。

我昨天遇到了关于菜单定位的相同问题。在检查了的源代码之后，我发现菜单组件是由内部Popover组件包装的。因此，您可以将anchorOrigin道具传递给菜单组件，以实现自定义定位。但在我的测试中，它只能接受anchorOrigin道具。当您传递targetOrigin道具时将出现错误，因此我正在尝试解决它。

我发现发生的是一个错误，几个小时前有人修复了它，我只需等待npm包更新。