Question

我的react应用程序具有CompnentDidMount（）函数，该函数将使用访存获取图像链接。我想更新该应用程序以使其具有搜索按钮。因此，我不想在页面加载时立即引导图像，而是希望在用户单击搜索按钮后加载图像。但是，当我单击搜索按钮时，图像开始部分消失，然后消失。我相信页面正在重新加载，因此图像消失了

完整代码

#ifdef X_DEFINED
#define GET_X(x) DEFAULT_X
#else
#define GET_X(x) x
#endif

有没有一种方法可以防止页面重新加载？还是除了重新加载之外的另一个问题

Answer 1

将type="button"添加到您的<Button />组件中。

Answer 2

您可能需要取消默认事件处理。

其中可能包括：

为执行onClick的按钮定义event.preventDefault()，或将其添加到您的onSearch
为执行onSubmit的{{1}}定义一个<Form>

更一般而言，您似乎对所看到的事物感到困惑。这是学习如何捕获错误的好机会。

一种方法是将事件处理程序附加到按钮和窗体，并在每个语句的第一行中插入一条日志语句。然后，您将打开浏览器的DevTools，启用“ Preseve log”（这样页面刷新不会清除日志），然后单击按钮查看会发生什么。

一种更复杂的方法是使用集成到Chrome和Firefox DevTools中的调试器。您可以在反应代码中插入断点，然后单击按钮。调试器将在您的断点处停止执行，然后使您可以悠闲地检查执行环境，并一次遍历一个代码路径。

Answer 3

let keys = Object.keys(o) // => ["Project Report"]选项卡中的任何function getName(o) { return Object.keys(o)[0]; } templateReports.sort((first, second) => getName(first).localeCompare(getName(second)));都会提交表单并重新加载页面。这是FORM和BUTTON的默认行为。为了防止这种情况发生，您必须超越它。

方法<Button>是默认功能，它将停止提交表单和页面加载。

在您的代码中做某事

<Form>

在上面，event.preventDefault()是任何浏览器事件的事件默认参数。这样，它将停止页面的加载。希望这会有所帮助！

在获取可以获取图像链接并显示它们之前，ReactJs搜索按钮会重新加载页面

3 个答案: