24 Марта 2024 г.

React. События

Содержание

Интерактивность - это считай базовая вещь.

Создадим базовый клик на кнопку, все так же как и в обычном js

import Button from "react-bootstrap/Button";

export default function TestButton () {
  function HandleClick()
  {
    console.log(1);
  }
  return (
    <>
      <Button variant="warning" onClick={HandleClick}>Кнопка</Button>
    </>
    )
}

// или передав функцию прям в обработчик
<>
    <Button variant="warning" onClick={function HandleClick()
    {
        console.log(1);
    }}>Кнопка</Button>
</>
// или передав анонимную функцию
<>
    <Button variant="warning" onClick={() => {console.log(1);}}>Кнопка</Button>
</>

Обработчики так же можно передавать в пропсах как обычный параметр.

Так же события срабатывают и на вложенных элементах.

Например, обернем вызов нашего компонента в div

<div onClick={() => {console.log('parent')}}>
    <TestButton></TestButton>
</div>

Тогда при клике на кнопку будет вызвано 2 обработчика.

Теперь создадим форму

// FormTest.jsx
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

// Убирвем действие по умолчанию e.preventDefault()
function FormTest() {
  return (
    <Form onSubmit={(e) => {e.preventDefault(); console.log('submit');}}>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Control type="email" placeholder="Enter email" />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
}

export default FormTest;

// Вызовем ее выше 
<FormTest></FormTest>

Возник вопрос или предложение пиши на почту alexsey_89@bk.ru или в Телеграмм канал

Дата публикации: 24 Марта 2024 г.