在 ReactJS 中渲染提交按钮时非自愿表单提交

Question

我很难理解 ReactJS 中的以下情况。

我在两个按钮之间有条件渲染：基本上，一个按钮显示另一个按钮。第二个按钮是提交类型，两个按钮都位于表单内。当我单击第一个按钮来显示/呈现第二个按钮时，根据我的理解，它应该只显示第二个按钮，而不是自动提交表单。

我用 create React 应用程序重现了这个案例：

function App() {
    const [showSubmit, setShowSubmit] = useState(false);

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <form method="POST" action="#">
                    {showSubmit ? (<button type="submit">Send</button>)
                    :
                    (<button type="button" onClick={() => setShowSubmit(true)}>
                        Show Submit
                    </button>)}
                </form>
            </header>
        </div>
    );
}

如果我只想显示/渲染提交按钮，为什么 ReactJS 会自动触发提交事件？

Answer 1

在这里发布给将来遇到此问题的任何人（可能是我） - 您所描述的问题可以通过向按钮元素添加 key 属性来解决，以便让 React 区分您要替换的按钮元素。