如何在React函数组件中通过Material-UI表单对话框最简存邮箱到state？

嘿，要把用户输入的邮箱添加到组件state里，最简的方式只需要3处小改动，几乎没加多少代码：

1. 添加邮箱状态：新增一个useState来存储输入的邮箱（如果需要存多个邮箱，就用数组类型的state）
2. 绑定输入框与状态：给TextField加上value和onChange属性，让输入框和state双向绑定
3. 处理订阅按钮点击：修改Subscribe按钮的点击事件，把邮箱存入state（如果是数组就追加，单个就直接赋值）

下面是修改后的完整代码，我用注释标了新增/改动的部分：

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  // 1. 新增邮箱状态，这里用单个字符串存，要是需要存多个就改成数组：const [emails, setEmails] = React.useState([])
  const [email, setEmail] = React.useState('');

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  // 2. 处理输入框变化，更新邮箱状态
  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  // 3. 处理订阅点击，把邮箱存入state，同时关闭弹窗
  const handleSubscribe = () => {
    // 如果是存单个邮箱，直接存就行；如果是数组，就用 setEmails(prev => [...prev, email])
    console.log('订阅的邮箱：', email); // 这里可以替换成你需要的逻辑，比如更新state或者发请求
    setOpen(false);
    // 可选：清空输入框
    setEmail('');
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>
            To subscribe to this website, please enter your email address here. We will send updates occasionally.
          </DialogContentText>
          {/* 绑定value和onChange */}
          <TextField 
            autoFocus 
            margin="dense" 
            id="name" 
            label="Email Address" 
            type="email" 
            fullWidth 
            value={email}
            onChange={handleEmailChange}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          {/* 替换原来的handleClose为handleSubscribe */}
          <Button onClick={handleSubscribe} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

如果需要存多个订阅邮箱，只需要把邮箱state改成数组，然后在handleSubscribe里做追加操作：

// 改成数组状态
const [emails, setEmails] = React.useState([]);

// 订阅时追加邮箱
const handleSubscribe = () => {
  setEmails(prevEmails => [...prevEmails, email]);
  setOpen(false);
  setEmail('');
};

这样改动非常少，完全符合“最少新增代码”的要求，而且逻辑清晰，是React函数组件里处理表单输入的标准做法。

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