如何在Material-UI中实现带样式的表单onSubmit自定义函数

嘿，作为刚接触React和Material-UI的新手，你遇到的这个问题其实很常见——别担心，咱们很快就能搞定，同时保留样式和表单提交功能！

问题根源 #

你现在的表单没有绑定提交事件处理函数，所以点击type="submit"的按钮时，只会触发浏览器默认的表单提交行为（页面刷新），而不会执行你的自定义逻辑。classes属性和事件处理完全不冲突，只是你没把提交事件绑定到表单上而已。

解决方案步骤 #

1. 定义自定义提交函数：在组件内部创建处理表单提交的函数，记得阻止默认行为（避免页面刷新）。
2. 绑定onSubmit事件到form元素：给form标签加上onSubmit属性，指向你的自定义函数，同时保留所有classes样式。
3. 获取表单输入值：可以用React的useState钩子或者ref来获取邮箱和密码的输入值，这里用useState举例子。

修改后的完整代码 #

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

const styles = theme => ({ 
  // 保留你原来的样式定义
  root: {
    padding: theme.spacing(3),
    maxWidth: 300,
    margin: '0 auto',
    marginTop: theme.spacing(5)
  },
  container: {
    display: 'flex',
    flexDirection: 'column',
    gap: theme.spacing(2)
  },
  textField: {
    width: '100%'
  },
  input: {
    // 你的输入框样式
  },
  divider: {
    height: theme.spacing(1)
  },
  button: {
    padding: theme.spacing(1)
  }
});

const Login = (props) => {
  const {classes} = props;
  // 用useState管理表单输入值
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // 自定义提交函数
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止默认页面刷新
    // 这里写你的提交逻辑，比如发送请求到后端
    console.log('提交的数据:', { email, password });
    // 比如调用props里的登录方法：props.onLogin(email, password);
  };

  return(
    <div>
      <Paper className={classes.root}>
        {/* 给form加上onSubmit事件 */}
        <form 
          className={classes.container} 
          noValidate 
          autoComplete="off"
          onSubmit={handleSubmit} // 关键：绑定提交函数
        >
          <TextField 
            id="email" 
            label="Email" 
            className={classes.textField} 
            InputProps={{ className: classes.input }} 
            type="email" 
            name="email" 
            autoComplete="email" 
            margin="normal" 
            variant="outlined" 
            required 
            autoFocus
            value={email} // 绑定值
            onChange={(e) => setEmail(e.target.value)} // 更新值
          />
          <TextField 
            id="outlined" 
            label="Password" 
            className={classes.textField} 
            InputProps={{ className: classes.input }} 
            type="password" 
            autoComplete="current-password" 
            margin="normal" 
            variant="outlined" 
            required
            value={password} // 绑定值
            onChange={(e) => setPassword(e.target.value)} // 更新值
          />
          <Typography className={classes.divider} />
          <Button 
            type="submit" 
            variant="contained" 
            color="inherit" 
            className={classes.button} 
          >
            Login
          </Button>
        </form>
      </Paper>
    </div>
  );
}

Login.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Login);

关键改动说明 #

• 给form标签添加了onSubmit={handleSubmit}，这样点击登录按钮就会触发你的自定义函数。
• 用useState绑定了输入框的值和 onChange 事件，确保能获取到最新的表单数据。
• 在handleSubmit里调用了e.preventDefault()，阻止浏览器默认的表单提交行为，避免页面刷新。

这样修改后，你的Material-UI样式会完整保留，同时点击登录按钮就能执行自定义的提交逻辑啦！

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