从 material-ui 的 TextField 打印 React 中的值答案

【问题标题】：Print a value in React from material-ui's TextField从 material-ui 的 TextField 打印 React 中的值
【发布时间】：2020-12-09 16:50:05
【问题描述】：

我想在单击按钮时打印 (console.log) 用户在对话框内的文本字段中输入的电子邮件。我尝试了很多方法，但是我的函数编写方式让我很挣扎。有人可以帮我解释一下吗？

export default function ConsultantsHeader (props) {
  
  
  return (
            <div>
      
            <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
              <DialogTitle id="dialog-title">Invite Consultant</DialogTitle>
              <DialogContent>
                <DialogContentText>
                  To invite a new X, please enter their email below:
                </DialogContentText>
                <TextField
                  autoFocus
                  margin="dense"
                  id="email"
                  label="Email Address"
                  type="email"
                  fullWidth
                  color="secondary"
                  variant="outlined"
                />
              </DialogContent>
              <DialogActions>
                <Button 
                color="inherit"
                size="small"
                onClick={handleClose} >
                  Cancel
                </Button>
                <Button 
                  onClick={inviteConsultant}
                  variant="contained"
                  color="secondary"
                  size="small">
                Send Invite
                </Button>
              </DialogActions>
            </Dialog>
    </div>
  );
}

【问题讨论】：

添加一个 value 属性到你的 TextField 并添加一个 onChange 事件监听器，它将使用输入的任何值设置状态，然后你可以 console.log() 设置的值状态。

标签： javascript css node.js reactjs material-ui

【解决方案1】：

我是这样做的：

    const [email, setEmail] = useState('');

  const submit = (event) => {
    const myEmail = email;

    console.log(email);

    event.preventDefault();
  };

和

<TextField
              autoFocus
              margin="dense"
              id="email"
              label="Email Address"
              type="email"
              fullWidth
              color="secondary"
              variant="outlined"
              value={email}
              onChange={(event) => {
                setEmail(event.target.value);
              }}
            />
          </DialogContent>
          <DialogActions>
            <Button 
            color="inherit"
            size="small"
            onClick={handleClose} >
              Cancel
            </Button>
            <Button 
              onClick={inviteConsultant}
              variant="contained"
              color="secondary"
              size="small"
              onClick={(event) => submit(event)}>
              Send Invite
            </Button>

【讨论】：