如何将 useState 输入值导出到另一个 React 页面答案

【问题标题】：How to export a useState input value to another React page如何将 useState 输入值导出到另一个 React 页面
【发布时间】：2021-02-26 16:03:30
【问题描述】：

我有一个输入字段，要求用户输入他们的姓名。我正在使用 React useState hooks 如下（不是完整的代码，只是给你一个想法的例子）：

const inputBox = ( ) => {
const [inputText, setInputText] = useState("");

 const handleUserInput = (event) => {
    const newValue = event.target.value;
    setInputText(newValue);
  };

return (

<input onChange={handleUserInput} />

)};

如何仅保存和导出更新的值，即用户键入的名称。

注意我不想导出整个 inputBox 组件，只导出更新的值，这样我就可以在另一个页面上使用它，而不会在新页面上显示物理输入元素。我不想在另一个页面上显示用户名，而是希望能够将其作为字符串/变量导入并将其传递给新页面上的另一个函数。

我试过了： 我知道如何在与物理输入框相同的页面上显示用户输入，因为这可以在同一个 inputBox 组件中完成。问题是如何仅获取用户从组件中键入的值，以便我可以单独导出 inputText，例如：导出默认值（输入框）导出 { inputText };

使用道具似乎不是一个解决方案，因为我不想在其他地方显示用户名或输入元素，我只想要值。我还尝试通过在此组件之外设置一个变量来保存该值，然后在用户提交他们的姓名时更新它，但它并没有完全起作用。

【问题讨论】：

这不是你在 React 中的工作方式，使用 Context API。尝试阅读一下文档

标签： reactjs react-props use-state

【解决方案1】：

您可以使用context 或redux 很好地管理您的状态。基本上它允许你在任何你喜欢的地方拥有你的状态。

以下是这两种方法的文档：-

您可以按照以下视频指南进行操作：-

【讨论】：

很高兴为您提供帮助

【解决方案2】：

您可以在父组件中创建context 并为其设置默认值并在子组件中更新其值。

useState 用于维护组件的状态，没有其他用途。并且无法从组件中导出状态变量。

您可以参考上下文 API 文档here

【讨论】：