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

Question

由于某种原因，在我的代码中，每当我单击取消按钮时，disableAccount 按钮的 onClick 事件就会被激活。所以 cancel 将 isEditMode 设置为 false，但 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;

Answer 1

TL;DR

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

详细解释

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

发生这种意外行为的原因与取消按钮切换回编辑模式的原因相同。整个问题是关于包装表单的label。 The HTML native label element 将label 附近或内部的可点击元素之一的点击事件附加到label 内部的内容。在显示模式下，label 检测到“禁用帐户”按钮并将其单击事件附加到整个组件。

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