在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 区分您要替换的按钮元素。

Answer 2

处理表单 onSubmit 函数可防止默认函数调用，当您尝试单击表单内的任何按钮时，它会尝试提交表单，因此请使用

e.preventDefault()

来阻止其提交。

您可以尝试使用表单标签上的 onSubmit 自行处理提交，而不是让浏览器为您处理。

import React, { useState } from 'react';
import './style.css';

function App() {
  const [showSubmit, setShowSubmit] = useState(false);
  console.log('state', showSubmit);
  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="#" onSubmit={(e) => e.preventDefault()}>
          {showSubmit ? (
            <button type="submit">Send</button>
          ) : (
            <button type="button" onClick={(e) => setShowSubmit(true)}>
              Show Submit
            </button>
          )}
        </form>
      </header>
    </div>
  );
}
export default App;

Answer 3

我也遇到了同样的问题，但我不知道为什么，但当你在相同的条件下显式地以不同的方式渲染每个问题时，我能够解决它。

例如，在此代码中，如果您单独放置此条件，则它会起作用。

<form method="POST" action="#" onSubmit={(e) => e.preventDefault()}>
    {showSubmit === true (
    <button type="submit">Send</button>)}

    {showSubmit === false (
    <button type="button" onClick={(e) => setShowSubmit(true)}>
     Show Submit</button>)}
</form>

Answer 4

出于某种原因，正如尼古拉斯提到的，使用“&&”而不是条件运算符对我有用。我不确定为什么会发生这种情况，我自己也想澄清这一点。