React Material TextInput值更新异常：跳转链接带undefined求助

你遇到的核心问题是**workerID没有随着输入框内容变化而同步更新**——因为你把它声明成了普通变量，而非React的状态变量。React不会自动追踪普通变量的变化，所以哪怕你在输入框里输入了内容，workerID始终是初始的undefined，拼接出来的链接自然就带上这个无效值了。

下面是具体的解决思路和修改后的代码：

关键修复步骤 #

1. 把workerID转为React状态：用useState钩子管理它，这样状态更新时组件会自动重新渲染，相关的链接也会同步更新。
2. 绑定输入框的onChange事件：让用户输入的内容能实时同步到workerID状态里。
3. 动态拼接跳转链接：直接在href属性里拼接最新的状态值，避免使用陈旧的变量值。

修改后的完整代码 #

import { useState } from 'react';
// 请确保导入你用到的其他组件：Grid、Paper、TextField、Button等

export default function YourComponent() {
  // 用useState声明状态，初始值设为空字符串
  const [workerID, setWorkerID] = useState(''); 
  const workerLink = "html link"; 

  return ( 
    <div className={classes.root}> 
      <Grid container spacing={2}> 
        <Grid item xs={12}> 
          <Paper className={classes.paper}> 
            <h1><DashboardOutlinedIcon /> Job Card</h1> 
            <Moment className={classes.time} interval={1000} format="HH:mm:ss DD/MM/YYYY" /> 
          </Paper> 
        </Grid> 
        <Grid item xs={4}> 
          <Paper className={classes.paper}> 
            <h3><AccessibilityNewRoundedIcon /> NameGet</h3> 
            <TextField id="standard-basic" label="Name:" variant="outlined" /> 
          </Paper> 
        </Grid> 
        <Grid item xs={4}> 
          <Paper className={classes.paper}> 
            <h3>Fetch</h3>
            {/* 添加onChange事件，实时更新workerID状态 */}
            <TextField 
              id="standard-basic" 
              label="ID:" 
              variant="outlined" 
              value={workerID}
              onChange={(e) => setWorkerID(e.target.value)}
            />
            {/* 直接在href里拼接最新的workerID，确保链接正确 */}
            <a 
              href={`${workerLink}${workerID}`} 
              target="_blank" 
              rel="noreferrer"
            >
              <Button variant="contained" color="primary" className={classes.formstyle}>
                Search
              </Button>
            </a>
            <SearchRoundedIcon /> 
          </Paper> 
        </Grid> 
      </Grid> 
    </div> 
  );
}

额外提示 #

• 移除了Button上的value={workerID}，因为按钮的value属性在这里不起作用，跳转逻辑由a标签的href控制。
• 如果你的workerLink末尾没有斜杠，建议拼接时加上（比如改成${workerLink}/${workerID}），避免出现html link123这种不规范的链接格式。

内容的提问来源于stack exchange，提问作者Jonathan Hindi