添加输入字段 onClick 无状态组件 React Electron答案

【问题标题】：Add Input Field onClick stateless component React Electron添加输入字段 onClick 无状态组件 React Electron
【发布时间】：2020-05-03 22:14:51
【问题描述】：

我是 electron 新手，正在努力尝试将带有 Hooks 和 ApplicationContext 的 React/Typescript 整合在一起。我没有创建框架，我需要学习如何使其工作。只需设置上下文以避免类似的答案，请改用 Redux。 :)

我有一个功能无状态组件，它是一个表单。它需要是无状态的，因此我可以访问 ApplicationContext 中保存的值。我正在尝试在单击按钮时呈现额外的输入字段，到目前为止，当我单击按钮时，Electron 调用该方法，然后重新呈现。我已经搜索了高低，并且已经在这个问题上敲了几个小时。如果已经有答案，我提前道歉。

到目前为止，显示按钮的代码如下所示：

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

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

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

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

【问题讨论】：

标签： reactjs electron render applicationcontext stateless

【解决方案1】：

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

【讨论】：

当 onClick={addUrls} 时仍然会导致重新渲染

【解决方案2】：

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

解决方案是在按钮上添加 type="button"，现在解决了。

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

我希望这可以为将来遇到此问题的人节省一些时间。

【讨论】：