OnClick 触发另一个按钮单击事件

由于某种原因，在我的代码中onClick活动为disableAccount每当我单击取消按钮时，按钮就会被激活。所以取消设置isEditMode为假但是disableAccount将其设置回 true，从而防止我在 UI 中看到任何明显的变化。这是一个 next.js 项目。

import React from 'react';
import TextInput from '../Input/TextInput';
import SmallButton from '../Buttons/SmallButton';

const DisableAccountForm = ({t, tc, onSubmit, password, setPassword, isEditMode, setIsEditMode}) => {
  return (
    <label className="block w-full max-w-xl text-2xl mb-4">
      {t("admin")}
      <form onSubmit={onSubmit} className="w-full max-w-xl text-base mt-2">
        <p className="mb-4">
          {t("disableP")}
        </p>
        {isEditMode ?
          <div>
            <p className="mb-4">
              {t("youSureP")}
            </p>
            <p className="text-sm mb-4">
              {t("enterPasswordP")}
            </p>

          </div>
          : null
        }


        {isEditMode ? 
          <label className="flex-col">
            {tc("password")}
            <TextInput 
              placeholder={tc("password")}
              value={password}
              onChange={e=>setPassword(e.target.value)}
              style="m-1"
              required
            />
            <SmallButton 
              type="submit"
              label={tc("submit")}
              color='bg-blue-500' 
              textColor='text-white'
            />
            <SmallButton 
              type="button"
              label={tc("cancel")}
              color='bg-red-500' 
              textColor='text-white'
              onClick={() => {console.log("cancel"); setIsEditMode(false)}}
            />
          </label> 
          :
          <SmallButton 
            type="button"
            label={t("disableAccount")}
            color='bg-blue-500' 
            textColor='text-white'
            onClick={() => {console.log("why"); setIsEditMode(true)}}
          />
        }
      </form>
    </label>
  );
}

export default DisableAccountForm;

这是上面代码的控制器。

import React, {useState} from 'react';
import DisableAccountForm from '../components/DisableAccountForm/DisableAccountForm';

const DisableAccountController = ({t, tc, onSubmit}) => {
  const [password, setPassword] = useState("");
  const [isEditMode, setIsEditMode] = useState(false);

  const disableAccount = (e) => {
    e.preventDefault();
    console.log("disableAccount");
    setIsEditMode(false);
  }

  return (
    <DisableAccountForm 
    t={t}
    tc={tc}
    onSubmit={disableAccount}
    password={password}
    setPassword={setPassword}
    isEditMode={isEditMode}
    setIsEditMode={setIsEditMode}
    />
  );
}

export default DisableAccountController;

小按钮

import React from 'react';

const SmallButton = ({type, label, color, textColor, style, onClick}) => {
  return (
    <button 
      type={type} 
      className={`m-1 ${color} hover:ring-2 rounded-md px-2 py-1 min-w-20 ${textColor} ${style}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

export default SmallButton;

TL;DR

问题是label表单从编辑模式切换到显示模式后，包装器立即“单击”禁用帐户按钮。这是 HTML 的默认行为label元素。您可以通过更改来解决label to div或片段或任何其他不会点击您的按钮的包装器。

详细解释

转到您发布的沙箱。它以显示模式（不是编辑模式）打开。现在，按顶部的文本“管理员”。正如您所看到的，“禁用帐户”按钮被按下 - 这肯定不是预期的行为。

发生这种意外行为的原因与取消按钮切换回编辑模式的原因相同。整个问题是关于label包裹表格。HTML 原生label element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label附加附近或内部的可点击元素之一的点击事件label到里面的内容label。在显示模式下，label检测“禁用帐户”按钮并将其单击事件附加到整个组件。

因此，当您单击“取消”按钮时 - 组件切换到编辑模式，并且label包装器“单击”“禁用帐户”按钮并将其切换回编辑模式。提交表单时您看不到它，因为您阻止了label的默认行为onSubmit打回来。您的问题的部分解决方案可以是preventDefault也在取消回调中 - 但它会使文本保持可点击状态。另一个解决方案可能是改变label to div或片段或任何其他不会点击您的按钮的包装器。