Как создать onSubmit с Material-UI - PullRequest
Новая
       11

Как создать onSubmit с Material-UI

1 голос
/ 08 июня 2019

Так что я довольно новичок в node.js / реагировать / материал-интерфейс. Я следовал руководству, чтобы попытаться настроить веб-сайт, и довольно хорошо ладил. Я решил включить материал-интерфейс для шикарных компонентов (не является частью руководства), а затем застрял, потому что я не могу запускать пользовательские функции при использовании тематического интерфейса.

С приведенным ниже кодом, я могу создать все хорошо, если я угроблю реквизиты "классов". Я могу добавить свою функцию, и все работает. Но я, очевидно, теряю все свои стили, если я делаю это. 

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

Я пытаюсь объединить стилизацию и возможность запуска пользовательской функции для отправки данных формы. У кого-нибудь есть мысли?

Ответы [ 2 ]

1 голос
/ 09 июня 2019

Свойство / стили класса не должны влиять на пользовательскую функцию отправки формы. Если вы думаете, что отказавшись от «реквизита класса», вы можете заставить работать собственную функцию - опубликуйте свой код, чтобы мы могли помочь вам в дальнейшем. [В вашем коде отсутствует функция отправки]

Вот один из способов добавить пользовательскую функцию отправки 

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>
    );
0 голосов
/ 09 июня 2019

Даже не помещайте свои текстовые поля в форму, используйте div, дайте им имя и используйте вашу кнопку для функции отправки. 

<div>
  <TextField
     name="name"
     label="name"
     value={this.state.name}
     onChange={this.onChange}
  />
</div>

<Button
  variant="contained" 
  color="primary" 
  onClick={e => this.onSubmit(e)}>
   submit
</Button>
...