Форма React Hook не отображает объекты в консоли при отправке - PullRequest
Новая
       7

Форма React Hook не отображает объекты в консоли при отправке

0 голосов
/ 23 апреля 2020

Я пытаюсь использовать форму реагирования, чтобы просто сгенерировать некоторые данные из двух текстовых полей пользовательского интерфейса и отобразить данные в консоли, но при нажатии кнопки отправки я ничего не вижу в console.log, это это код: 

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import { useForm } from 'react-hook-form';


const useStyles = makeStyles({
    container: {
       margin: '1rem',
       '& .MuiTextField-root': {
         margin: '1rem 0',

     },
  },
});

const GuestJoiningForm = () => {
const { register, handleSubmit } = useForm()
const onSubmit = (data) => {
   console.log(data);
};

const classes = useStyles();
return (
   <form onSubmit={handleSubmit(onSubmit)} className={classes.container}>
       <TextField
       ref={register}
       label="Name"
       name="name"
       variant="outlined"
       fullWidth/>

       <TextField
       ref={register}
       multiline rows={3}
       label="Content"
       name="content"
       variant="outlined"
       fullWidth/>

       <Button
       color="primary"
       variant="contained">Submit</Button>
  </form>
 )
};
export default GuestJoiningForm;

Когда я ввожу данные в текстовые поля и нажимаю кнопку отправки, ничего не происходит, и я ожидаю увидеть объект данных, которые я ввожу. Я не представляю, что это консоль, которую я использую, но она в Safari, и единственное, что я заметил, это что-то, что говорит [HMR] Ожидание сигнала обновления от WDS ...

Не уверен, если это имеет какое-либо отношение к этому, но будет очень признателен за любую помощь в этом вопросе, если у вас будет время, спасибо.

Последнее, что нужно добавить! Я добавил type = {'submit'} к кнопке, и консоль ответила пустым {}, что, хотя и не решило проблему, думаю, доказывает, что консоль работает

1 Ответ

0 голосов
/ 23 апреля 2020
  1. Вам необходимо добавить атрибут type как submit в кнопке Submit. 
<Button type="submit" color="primary" variant="contained">
  Submit
</Button>;
Вам необходимо добавить inputRef реквизит для обоих TextField компонентов, подобных этому 
 <TextField
    ref={register}
    inputRef={register}
    label="Name"
    name="name"
    variant="outlined"
    fullWidth
  />

  <TextField
    ref={register}
    multiline
    rows={3}
    inputRef={register}
    label="Content"
    name="content"
    variant="outlined"
    fullWidth
  />

Вот песочница для вашей формы.

...