在React.js中如何提交文本框的值实现跳转指定链接？

解决方案 #

你可以根据你的跳转场景选择以下两种实现方式： #

场景1：跳转到外部链接/新开房间页面

直接在JOIN按钮的点击事件里添加浏览器原生跳转逻辑即可，示例修改后代码如下：

import { useState } from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

function Home(){
    const [roomLink, setRoomLink] = useState('')

    function handleInputChange(val){
        setRoomLink(val.target.value)
    }

    function joinRoom(){
        if(!roomLink.trim()) return // 空输入拦截
        // 方式1：在新标签页打开房间链接（推荐视频会议场景，不覆盖当前页）
        window.open(roomLink, '_blank')
        // 方式2：在当前页直接跳转，替换上面一行即可
        // window.location.href = roomLink
    }

    return(
        <React.Fragment>
            <h3>Welcome, Instructor</h3>
            <hr />
            <TextField label="Room ID" onChange={handleInputChange} />
            <hr/>
            <Button variant="contained" color="primary" onClick={joinRoom}>JOIN ROOM</Button>
        </React.Fragment>
    )
}

export default Home;

场景2：单页应用内跳转（房间页是你项目内的路由页面，用React Router管理）

需要先引入React Router的useNavigate钩子实现路由跳转，示例代码如下：

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

function Home(){
    const navigate = useNavigate()
    const [roomId, setRoomId] = useState('')

    function handleInputChange(val){
        setRoomId(val.target.value)
    }

    function joinRoom(){
        if(!roomId.trim()) return // 空输入拦截
        // 假设你的房间路由格式为 /room/[房间ID]，按你实际路由调整即可
        navigate(`/room/${roomId}`)
    }

    return(
        <React.Fragment>
            <h3>Welcome, Instructor</h3>
            <hr />
            <TextField label="Room ID" onChange={handleInputChange} />
            <hr/>
            <Button variant="contained" color="primary" onClick={joinRoom}>JOIN ROOM</Button>
        </React.Fragment>
    )
}

export default Home;

补充说明 #

• 如果用户输入的是完整房间链接选场景1即可，如果输入的只是房间ID，对应你的路由规则选场景2
• 可以根据需求额外加输入格式校验，避免无效跳转

内容的提问来源于stack exchange，提问作者Summer Winter