React Bootstrap：为按钮添加动态切换文本逻辑的实现疑问

嘿，我明白你的问题了——把<input type="submit">嵌套在自定义Button组件里确实会导致样式冲突，毕竟两个“按钮”元素叠在一起，浏览器默认样式和组件样式打架，肯定看起来怪异，而且语义上也说不通。给你几个靠谱的解决方向：

1. 直接让Button组件充当提交按钮（最优解） #

如果你的Button组件是基于原生<button>封装的，那完全不需要嵌套input，直接把提交相关的属性传给Button就行：

<Button variant="primary" type="submit">
  {editMode ? "Update Recipe" : "Create Recipe"}
</Button>

原理很简单：自定义Button组件如果内部渲染的是原生<button>，那你传递的type="submit"会被透传过去，这样它就具备了表单提交的功能，同时样式完全继承Button组件的设计，不会有冲突。

如果是你自己写的Button组件，记得要把接收的props（比如type、onClick）传递给内部的原生按钮：

// 自定义Button组件示例
const Button = ({ variant, children, ...props }) => {
  return (
    <button className={`button-${variant}`} {...props}>
      {children}
    </button>
  );
};

2. 手动触发表单提交（如果Button不支持type属性） #

要是你的Button组件没法直接接收type="submit"，可以通过表单ref手动触发提交：

import { useRef } from 'react';

function RecipeForm() {
  const formRef = useRef(null);
  const editMode = false; // 这里替换成你的状态

  const handleSubmit = () => {
    // 确保表单存在再提交
    formRef.current?.submit();
  };

  return (
    <form ref={formRef}>
      {/* 你的表单输入项 */}
      <Button variant="primary" onClick={handleSubmit}>
        {editMode ? "Update Recipe" : "Create Recipe"}
      </Button>
    </form>
  );
}

这种方式绕开了让Button成为提交按钮的限制，通过点击事件主动提交表单，同样能实现需求，而且样式不会乱。

3. 第三方组件库的适配（如果用了UI库） #

如果你用的是像Material UI、Bootstrap React这类第三方组件库，它们的Button组件本身就支持作为提交按钮，只需要正确配置props：

比如Material UI的写法：

import Button from '@mui/material/Button';

<Button variant="contained" color="primary" type="submit">
  {editMode ? "Update Recipe" : "Create Recipe"}
</Button>

这些库的组件已经帮你处理好了原生按钮的语义和样式，直接用就行，完全不需要嵌套input。

总结一下：核心问题就是不要在按钮组件里嵌套另一个按钮类型的元素，要么让自定义Button本身成为提交按钮，要么手动触发提交，这样样式和功能都能正常工作。

内容的提问来源于stack exchange，提问作者DevA