添加输入字段onClick无状态组件反应电子

Question

我是电子新手，正在努力使带有Hooks的React / Typescript和ApplicationContext融合在一起。我没有创建框架，我需要学习如何进行这项工作。只需设置上下文来避免类似的答案，请改用Redux。 ：）

我有一个功能无状态组件，它是一种形式。它必须是无状态的，因此我可以访问ApplicationContext中保存的值。我试图在按钮单击上渲染额外的输入字段，到目前为止，当我单击按钮Electron调用该方法，然后重新渲染时。我搜寻了高低，并为此努力了几个小时。如果已经有答案，我提前致歉。

到目前为止，显示按钮的代码看起来像这样：

<div className="form-group">
    <button onClick={() => addUrls()}>
        Add a URL
    </button>
</div>

并且该方法目前仅打印到控制台。它看起来像这样：

const addUrls = () => {
    console.log('clicked')
}

打印语句进入控制台，然后Electron重新渲染。其余组件的方法被调用，并且以可预测的方式运行。我真的很困惑为什么这个特定的动作会导致渲染。如果有人可以指出答案的方向，或者指出我在代码中做些蠢事的地方，我将不胜感激。

Answer 1

尝试用onClick={() => addUrls()}替换onClick={addUrls}。前一种方法将在每个渲染上创建一个新引用，这可能会导致重新渲染。

Answer 2

原来我在做些愚蠢的事情。因为我的按钮在表单内，并且未指定按钮类型，所以它的默认行为是“提交”，这会导致使用onClick进行渲染。

解决方案是将type =“ button”添加到按钮，现在已解决。

    <div className="form-group">
        <button onClick={addUrls} type="button">
            Add a Reference URL
        </button>
    </div>

我希望这能在以后遇到这个问题的情况下节省一些时间。