如何使用 Material-UI 创建 onSubmit

Posted 2023-02-22

【中文标题】如何使用 Material-UI 创建 onSubmit

【英文标题】：How to create onSubmit with Material-UI

【发布时间】：2019-10-23 20:07:52

【问题描述】：

所以我对 node.js/react/material-ui 还是很陌生。我一直在按照指南尝试建立一个网站，并且进展顺利。我决定为时髦的组件（不是指南的一部分）包含 material-ui，然后因为在使用主题 ui 时似乎无法触发自定义函数而陷入困境。

使用下面的代码，如果我放弃“类”道具，我可以创建一切正常。我可以添加我的功能，一切正常。但如果我这样做，我显然会失去所有的造型。

const styles = theme => (
    // Styling - omitted
);

const Login = (props) => 

    const classes = props;

    return(
        <div>
            <Paper className=classes.root>
                <form className=classes.container noValidate autoComplete="off">
                    <TextField
                        id="email"
                        label="Email"
                        className=classes.textField
                        InputProps=
                            className: classes.input
                        
                        type="email"
                        name="email"
                        autoComplete="email"
                        margin="normal"
                        variant="outlined"
                        required
                        autoFocus
                    />
                    <TextField
                        id="outlined"
                        label="Password"
                        className=classes.textField
                        InputProps=
                            className: classes.input
                        
                        type="password"
                        autoComplete="current-password"
                        margin="normal"
                        variant="outlined"
                        required
                    />
                    <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);

我正在尝试结合样式以及能够触发自定义函数来提交表单数据。有人有什么想法吗？

【问题讨论】：

对于提交部分，您可以将onSubmit 属性传递给您的form，它必须是带有单个参数event 的函数

【参考方案1】：

类属性/样式不应该对表单提交自定义功能有任何影响。如果您认为放弃“类道具”，您可以获得自定义功能 - 发布您的代码，以便我们可以进一步帮助您。 [您的代码缺少提交功能]

这是添加自定义提交功能的一种方法

const Login = (props) => 
const classes = props;
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    function handleSubmit(event) 
        event.preventDefault();
        console.log( 'Email:', email, 'Password: ', password); 
       // You should see email and password in console.
       // ..code to submit form to backend here...

    

    return( <div >
            <Paper className=classes.root>
                <form className=classes.container onSubmit=handleSubmit >
                    <TextField
                        ....                   
                        value=email
                        onInput= e=>setEmail(e.target.value)
                        .....

                    />
                    <TextField
                        ....
                        value=password
                        onInput= e=>setPassword(e.target.value)
                        ....
                    />
                    <Typography className=classes.divider />
                    <Button
                        type="submit"
                         ....
                        className=classes.button
                    >
                        Login
                    </Button>
                </form>
            </Paper>
        </div>
    );

【讨论】：

真棒。我不知道从哪里开始，但这应该让我继续前进。稍后我会尝试一下，谢谢！