Как подключить кнопку для отправки формы с использованием Материальных карт UI?

Question

У меня есть простая форма, которая находится внутри материала: пользовательский интерфейс Карта ....

 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';

return (
<Card className={classes.card}>
  <CardContent>
        <form id="login" className={classes.form} noValidate onSubmit={handleSubmit}>
            <TextField id="username" label="User Name" />
            <TextField id="password" label="Password" />
        </form>
  </CardContent>
  <CardActions>
    <Button size="small">Submit</Button>
  </CardActions>
</Card>
)

Как подключить кнопку «Отправить» внутри компонента «CardActions» к форма в компоненте «CardContent» (чтобы щелкнуть по нему, вызвали handleSubmit)?

Answer 1

Я думаю, что вы можете просто обернуть все это в тег формы, и это сработает, если вы добавите type = "submit". В качестве альтернативы вы можете добавить onClick к вашей кнопке и обработать ее с помощью метода, который будет работать. Я не проверял то, что я написал ниже, но это может помочь.

 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';

return (
<Card className={classes.card}>
  <CardContent>
        <form id="login" className={classes.form} noValidate onSubmit={handleSubmit}>
            <TextField id="username" label="User Name" />
            <TextField id="password" label="Password" />
            <CardActions>
               <Button size="small" type="submit">Submit</Button>
            </CardActions>
        </form>
  </CardContent>

</Card>
)

Answer 2

Я думаю, что вы сможете использовать ссылки, чтобы получить форму и отправить ее вручную.

import {useRef} from 'react';
import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';

return (


const formRef = useRef(null);
const connectButton = () => {
    formRef.current.submit();
}



<Card className={classes.card}>
  <CardContent>
        <form ref={formRef} id="login" className={classes.form} noValidate onSubmit={handleSubmit}>
            <TextField id="username" label="User Name" />
            <TextField id="password" label="Password" />
        </form>
  </CardContent>
  <CardActions>
    <Button onClick={connectButton} size="small">Submit</Button>
  </CardActions>
</Card>
)

альтернативно.

<button form='login' type="submit" size="small">Button</button>