在 React 中从该组件外部更新功能组件的状态（单击另一个文件中的按钮）答案

【问题标题】：Update state of a functional component from outside of that component(on click of button in another file) in React在 React 中从该组件外部更新功能组件的状态（单击另一个文件中的按钮）
【发布时间】：2020-06-30 07:32:21
【问题描述】：

我有一个名为 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 的文件，它有一个按钮，点击它我需要更改设置组件的状态。我该怎么做？

文件索引.tsx

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

【问题讨论】：

为什么要将 jquery 与 React 混合使用？
我知道这不是正确的方法，但我们正在开发一个旧框架并尝试在其中包含 React JS。 - 维杰·普希金
是Index.tsx 的父组件settings 组件？
回答了你的问题:)

标签： javascript reactjs react-state-management react-functional-component

【解决方案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);
  });

【讨论】：

【解决方案2】：

您可以使用CustomEvents。创建自定义事件。从 jquery 和你的 react 组件上的事件监听器触发事件。调用事件监听器时更新状态。

【讨论】：

【解决方案3】：

您可以将 isActive 提升到上部组件以使其可用于按钮更改它。因此，将 isActive 变量提升到 index.tsx 并将其传递给按钮以及设置组件。

【讨论】：