Обновить состояние функционального компонента извне этого компонента (по нажатию кнопки в другом файле) в React

Question

У меня есть компонент Named Settings, который содержит переменную (IsActive) с useState по умолчанию true. Мне нужно обновить состояние переменной (IsActive) извне этого компонента одним нажатием кнопки. Эта кнопка не является частью этого компонента. Как я могу изменить состояние этой переменной одним нажатием кнопки.

файл Settings.tsx

 import React, { useState } from "react";
 import ReactDOM from "react-dom";

 export const reportSettings = () => {
    ReactDOM.render(<Settings />, document.querySelector('.setting-container'));
 };

 const Settings = () => {
    const [isActive, setIsActive] = useState(true);

    return (
        <div>
           <input type="text" disabled={isActive} />
        </div>
    );
};

export default Settings;

У меня есть другой файл с именем index.tsx, в котором есть кнопка, при нажатии из этого мне нужно изменить состояние настроек компонента. Как мне это сделать?

файл Index.tsx

  $(".btn-success").on("click", function() {
   //change state of settings component
  });

Answer 1

Если бы вы использовали только React, я бы предложил вам использовать Redux или React. Поскольку JQuery также используется, существует еще один способ - через Пользовательское событие

const event = new CustomEvent("settings", {
  isActive: false
});
$(".btn-success").on("click", function() {
    window.dispatchEvent(event);
});



// Settings.tsx
  const [isActive, setIsActive] = useState(true);

  React.useEffect(() => {
    const toggleFunc = (ev) => {
      setIsActive(ev.isActive)
    };

    window.addEventListener("settings", toggleFunc);

    // Remove listener
    return () => window.removeEventListener("settings", toggleFunc);
  });

Answer 2

Вы можете использовать CustomEvents . Создать пользовательское событие. Запустите событие из jquery и прослушиватель событий в вашем компоненте реакции. Обновите состояние при вызове прослушивателя событий.

Answer 3

Вы можете поднять isActive на верхний компонент, чтобы кнопка была доступна для его изменения. Поэтому поднимите переменную isActive в index.tsx и передайте ее кнопке, а также компоненту Settings.