如何使用Material-UI创建onSubmit

Glanyx 发表于 Dev

格兰仕

因此，我对node.js / react / material-ui还是相当陌生的。我一直在遵循指南尝试建立网站，并且进展顺利。我决定为时髦的组件（而不是本指南的一部分）添加Material-ui，然后陷入困境，因为在使用主题ui时似乎无法触发自定义功能。

使用以下代码，如果我放弃“ classs”道具，我可以创建所有东西。我可以添加我的功能，并且一切正常。但是，如果这样做，我显然会失去所有样式。

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);

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

米拉·达蒂（Meera Datey）

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

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

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>
    );

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。