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

Question

bounty 6 天后到期。这个问题的答案有资格获得 +50 声望奖励。
Kristian Martinez正在寻找信誉良好的来源的答案。







出于某种原因，在我的代码中 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;

这是上面代码的 Controller 。

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; 博士
问题在于label在表单从编辑模式切换到显示模式后，包装器立即“单击”禁用帐户按钮。这是 HTML label 的默认行为元素。您可以通过更改 label 来解决它至 div或片段或任何其他不会点击您的按钮的包装器。
详细解释
转到您发布的沙箱。它以显示模式(不是编辑模式)打开。现在，按顶部的文本“管理员”。如您所见，按下了“禁用帐户”按钮 - 当然不是预期的行为。
发生这种意外行为的原因与取消按钮切换回编辑模式的原因相同。整个问题是关于 label包装表格。 The HTML native label element在 label 附近或内部附加可点击元素之一的点击事件到label里面的内容.在显示模式下，label检测“禁用帐户”按钮并将其单击事件附加到整个组件。
因此，当您单击“取消”按钮时 - 组件切换到编辑模式，label包装器“单击”“禁用帐户”按钮并将其切换回编辑模式。提交表单时您看不到它，因为您阻止了 label onSubmit 中的默认行为打回来。您的问题的部分解决方案可以是 preventDefault在取消回调中也是 - 但它会使文本可点击。另一种解决方案可能是更改 label至 div或片段或任何其他不会点击您的按钮的包装器。