如何修复 ReactJS 中这种不需要的按钮行为

Question

所以我试图根据表单是否显示来有条件地在 ReactJS 中的两个 html 按钮之间切换。基本上，如果显示了表单，则显示一个提交按钮，如果未显示，则显示一个常规按钮来显示表单。

这是我的代码。 （我正在使用 Antd 的按钮组件，但我也尝试使用常规 html 按钮并遇到了同样的问题。

<div>
        {showForm ? (
          <Button
            loading={isUploading}
            htmlType="submit"
            form="videoForm"
            className={Styles.button}
          >
            {isUploading ? 'Uploading' : 'Upload Video'}
          </Button>
        ) : (
          <Button
            htmlType="button"
            onClick={() => setShowForm(true)}
            className={Styles.button}
          >
            {successMsg ? 'Upload Another Video' : 'Show Form'}
          </Button>
        )}
      </div>

我遇到的问题是，当表单未显示并且我单击“显示表单”按钮时，表单会正确显示并且按钮会切换，但会触发表单提交事件，这不是我所期望或想要的。

有什么想法吗？我该如何解决这个问题？我也尝试执行以下操作，但得到了相同的结果。

<div>
        <Button
          loading={isUploading}
          htmlType={showForm ? 'submit' : 'button'}
          form="videoForm"
          className={Styles.button}
        >
          {showForm && (isUploading ? 'Uploading' : 'Upload Video')}
          {!showForm && (successMsg ? 'Upload Another Video' : 'Show Form')}
        </Button>
      </div>

任何帮助将不胜感激。

Answer 1

如果不阻止，点击事件将向上冒泡组件树到父元素。虽然没有显示，但我猜测您的

<form>

围绕着

<Button>

并且有一个 onClick 处理程序正在捕获该冒泡事件。

为了防止这种情况，请在事件对象上调用

stopPropagation

：

onClick={(event) => {
  event.stopPropagation();
  setShowForm(true);
}}