添加输入框 onClick 无状态组件 React Electron

Question

我是电子新手，正在努力让 React/Typescript 与 Hooks 和 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

原来我在做一些蠢事。因为我的按钮在表单内，而且我没有指定按钮类型，所以它执行的是 "submit" 的默认行为，这会导致使用 onClick 进行渲染。

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

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

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

添加输入框 onClick 无状态组件 React Electron

Add Input Field onClick stateless component React Electron

reactjs

electron

render

applicationcontext

stateless