React Material 更新 TextInput 值答案

【问题标题】：React Material Updating TextInput ValueReact Material 更新 TextInput 值
【发布时间】：2020-11-09 12:31:56
【问题描述】：

所以我基本上试图有一个输入字段来完成一个链接并将用户引向它。但是，当我单击按钮时，我会得到一个可以正确打开的页面，但最后会出现“未定义”，就好像输入字段没有更新一样。任何见解将不胜感激:)

    let workerID;
    const workerLink = "html link";
    const workerSearch = workerLink + workerID

    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>
              <TextField id="standard-basic" label="ID:" variant="outlined" value={workerID}/>
                <a href={workerSearch} target="_blank" rel="noreferrer"><Button variant="contained" color="primary" className={classes.formstyle} value={workerID}>Search</Button></a><SearchRoundedIcon />
            </Paper>
        </Grid>
      </Grid>
    </div>
  );

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您应该向输入添加 onChange 属性（MaterialUI 中的 TextField），并且您最好在 React 中使用状态而不是变量，因为如果变量再次更新，React 不会根据变量的值更新 UI，但它会在状态的情况下更新。

import React, {useState} from 'react'

// Your Rest of code

const [workerID, setWorkerID] = useState('')//initial value of workerID is empty string

   return(
    //Rest of Code

    <TextField id="standard-basic" label="ID:" variant="outlined" value={workerID} onChange={event=>setWorkerID(event.target.value)}/>

    //Rest of Code
)

【讨论】：