как присвоить переменной DOM Element в React? document.querySelector()

Question

Думаю использовать @syncfusion/ej2-react-schedule планировщик в React. Задача сделать планировщик. Установил библиотеку, использую календарь по инструкции
но мне нужно изменить форму добавления записей к примеру хочу добавить событие на кнопку SAVE

var btnSave = document.querySelector(
      ".e-control.e-btn.e-lib.e-primary.e-event-save.e-flat"
    );
    btnSave.addEventListener("click",
      (obj) => {
    axios.post("https://610ce13a66dd8f0017b76f02.mockapi.io/calendar", obj);
  });

но этот код не работает в Реакт как это сделать? код>

/* eslint-disable no-unused-vars */
import "./App.css";
import axios from "axios";

import {
  ScheduleComponent,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Inject,
} from "@syncfusion/ej2-react-schedule";

function App() {
  var d = {
    Id: 1,
    Subject: "Meeting - 1",
    StartTime: new Date(2021, 7, 15, 10, 0),
    EndTime: new Date(2021, 7, 15, 12, 30),
    IsAllDay: false,
  };
  var d2 = {
    Id: 2,
    Subject: "Scrum Meeting",
    StartTime: new Date(2021, 7, 16, 9, 0),
    EndTime: new Date(2021, 7, 16, 10, 30),
    Description: "Meeting time changed based on team activities.",
    RecurrenceID: 1,
  };
  var data = [d, d2];

  const dataPost = (obj) => {
    axios.post("https://610ce13a66dd8f0017b76f02.mockapi.io/calendar", obj);
  };

  const saveBtn = () => {
    var btnSave = document.querySelector(
      ".e-control.e-btn.e-lib.e-primary.e-event-save.e-flat"
    );
    btnSave.addEventListener("click", () => {
      console.log("click Save");
    });
  };

  var eventSettings = { dataSource: data, editFollowingEvents: true };
  return (
    <div>
      <button onClick={() => dataPost(d)}>post</button>
      <ScheduleComponent
        height="550px"
        selectedDate={new Date(2021, 7, 15)}
        eventSettings={eventSettings}
      >
        <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
      </ScheduleComponent>
    </div>
  );
}

export default App;

Answer 1

Это так не заработает. Метод saveBtn должен быть вызван каким-то триггером (юзер или хуки жизненного цикла).

В данном случаи попробуй данный код засунуть в componentDidMount. Не уверен по поводу addEventListener, но это как одна из гипотез, что может сработать.

Второй вариант - просто создай независимый JS файл, подключи после основного файла с инициализацией реакта и засунь туда свой код. Это сработает, но, ясное дело, лучше всё это дело приправить дополнительной конфигурацией webpack.

Если ты совсем не варишься в этом, то какое-то из решений будет работать и тебе этого хватит.

БЛОГ НА HUSL

как присвоить переменной DOM Element в React? document.querySelector()

Ответы (1 шт):