Как я могу получить доступ к значениям из формы, созданной с помощью Reactbootstrap, когда пользователь нажимает кнопку отправки, я не могу получить значения

Это код, с которым я сейчас работаю. Итак, как можно собирать значения из формы? В submitHandler, как я могу увидеть значения из электронной почты, запроса и fullName. Я привык к onChange, но есть ли способ получить значения, используя только onSubmitHandler?

import React, { Fragment, FormEventHandler } from 'react';
import { Form } from 'react-bootstrap';
import { Button } from '../../../components';

const ContactForm = () => {

  const submitHandler: FormEventHandler = (event) => {
    event.preventDefault();
    event.persist();
  };

  return (
    <Fragment>
      <h1>Reach out to us !</h1>
      <Form onSubmit={submitHandler}>
        <Form.Group controlId="formGridEmail">
          <Form.Label>Full Name</Form.Label>
          <Form.Control placeholder="Peter Pots" />
        </Form.Group>
        <Form.Group controlId="formGridPassword">
          <Form.Label>Your Email</Form.Label>
          <Form.Control type="email" placeholder="[email protected]" />
        </Form.Group>
        <Form.Group controlId="formGridQuery">
          <Form.Label>Query</Form.Label>
          <Form.Control as="textarea" rows={3} placeholder="Peter Pots" />
        </Form.Group>
        <Button variant="primary" type="submit" icon="arrow-circle-right">
          Submit
        </Button>
      </Form>
    </Fragment>
  );
};

export default ContactForm;

Заранее спасибо :)


reactjs typescript forms react-bootstrap
person Abhishek Sharma    schedule 06.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно добавить атрибут name с уникальными именами к Form.Control компонентам:

import React, { Fragment, FormEventHandler,  } from 'react';
import { Form } from 'react-bootstrap';
import { Button } from '../../../components';

const ContactForm = () => {

  const [values, setValues] = useState({});

  const onFormChange = (e, updatedAt) => {
    const name = e.target.name;
    const value = e.target.value;
    setValues({ ...values, [name]: value });
    console.log(name, value);
  };

  const submitHandler: FormEventHandler = (event) => {
    event.preventDefault();
    event.persist();
    console.log('push data somewhere :)')
    console.log(values);
  };

  return (
    <Fragment>
      <h1>Reach out to us !</h1>
      <Form onSubmit={submitHandler}>
        <Form.Group controlId="formGridEmail">
          <Form.Label>Full Name</Form.Label>
          <Form.Control name="full_name" onChange={onFormChange} placeholder="Peter Pots" />
        </Form.Group>
        <Form.Group controlId="formGridPassword">
          <Form.Label>Your Email</Form.Label>
          <Form.Control type="email" name="email" onChange={onFormChange} placeholder="[email protected]" />
        </Form.Group>
        <Form.Group controlId="formGridQuery">
          <Form.Label>Query</Form.Label>
          <Form.Control as="textarea" name="query" onChange={onFormChange} rows={3} placeholder="Peter Pots" />
        </Form.Group>
        <Button variant="primary" type="submit" icon="arrow-circle-right">
          Submit
        </Button>
      </Form>
    </Fragment>
  );
};

export default ContactForm;
person Pavel Petrovich    schedule 06.06.2020
comment
Спасибо @Pavel за ваш ответ, но я получаю эту ошибку Property 'name' does not exist on type 'EventTarget' в event.target.value. Также у меня есть вопрос о том, как использовать идентификатор элемента управления? - person Abhishek Sharma; 08.06.2020
comment
Мне очень жаль, что это моя вина. Я обновлю свой ответ через минуту. - person Pavel Petrovich; 08.06.2020
comment
в чем польза контрольного идентификатора и есть ли способ добиться этого без onChange и исключительно с помощью onSubmitHandler. - person Abhishek Sharma; 09.06.2020
comment
Конечно можем. Но это не способ React. В событии отправки мы можем собирать данные из поля другим способом, например, используя vanilla js с манипуляциями с HTMLDom Element. Я не рекомендую это делать. - person Pavel Petrovich; 09.06.2020