时间戳

首页 > 解决方案 > 如何在这些链接之一下输入下拉功能？

javascript - 如何在这些链接之一下输入下拉功能？

问题描述

如何在这些链接之一下输入下拉功能？`从'react'导入反应，{组件}；从'react-router-dom'导入{Link}；

export class Nav extends Component {
    state = {
        toggle: false
    }

    menuToggle = () =>{
        this.setState({toggle: !this.state.toggle})
    }


    render() {
        const {toggle} = this.state;
        return (
            <>
                <ul className={toggle?"toggle" : ""}>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/aboutus">About Us</Link></li>
                    <li><Link to="/events">Events</Link></li>
                    <li><Link to="/scholarships">Scholarships</Link></li>
                    <li><Link to="/makeadonation">Make A Donation</Link></li>
                    <li><Link to="/contactus">Contact Us</Link></li>
                    <li><Link to="/login">Log In</Link></li>
                    <li><Link to="/logintrial">Contact Us Trial</Link></li>
                    <li className="close" onClick={this.menuToggle}>X</li>
                </ul>
                <div className="menu" onClick={this.menuToggle}>Menu</div>
            </>
        
        )
    }
}

export default Nav`

标签： javascriptreactjsnavbarnav

解决方案

您的意思是使用诸如 Material UI 的 Select 组件之类的下拉选择器，并且每个选择都会导致您的应用程序中的不同位置？

选择组件通常有一个onChange来自 Material 示例的示例：

<Select
   labelId="demo-simple-select-label"
   id="demo-simple-select"
   value={age}
   onChange={handleChange}>
     <MenuItem value={10}>Ten</MenuItem>
     <MenuItem value={20}>Twenty</MenuItem>
     <MenuItem value={30}>Thirty</MenuItem>
</Select>

在该onChange方法中，您将执行一些逻辑来确定去哪里，并使用 React Router 的history对象去那里。

获取history对象：

const history = useHistory()

在onChange事件处理程序中去那里：

const handleChange = (event) => {
    const uri == ... use event.target.value to determine the URI to go to
    history.push(uri)
};

查看以下链接：

推荐阅读