在React多步骤表单中如何动态修改按钮的type属性与样式？

你要实现的多步骤表单按钮类型动态切换功能，现有代码中已经写了对应的type属性判断逻辑，补全以下几个缺失的部分即可正常运行：

问题修复&优化点 #

• 首先给表单绑定提交处理函数，阻止默认的浏览器提交刷新行为，同时写入你需要的提交逻辑：

function FindTransportationForm(props) {
  const [step, setStep] = useState(1);
  // 省略你已有的其他state定义

  // 新增表单提交处理函数
  const handleSubmit = (e) => {
    e.preventDefault();
    // 此处写第5步点击提交后要执行的逻辑，比如校验表单、调用接口提交数据等
    console.log('提交表单数据：', formData)
  }

  // 省略你已有的其他逻辑
  return (
    // 给form标签绑定onSubmit
    <form className={Styling['find-transportation-form']} onSubmit={handleSubmit}>
    // 省略你已有的其他结构
  )
}

• 给下一步按钮的点击逻辑加判断，避免到第5步点击按钮时step继续加1超出总步数：

<Btn
  class={step === Titles.length ? 'btn-green' : 'btn-green'}
  text={step === Titles.length ? 'find transportation' : 'next'}
  type={step === Titles.length ? 'submit' : 'button'}
  // 修改onClick逻辑
  onClick={() => {
    if (step < Titles.length) {
      setStep((currStep) => currStep + 1);
    }
  }}
  display={step < Titles.length ? 'block' : 'block'}
/>

• 可以给Btn组件加默认props兜底，避免组件被调用时没传type的情况下默认走submit触发意外提交：

function Btn(props) {
  return (
    <button
      type={props.type}
      className={Styling[props.class]}
      onClick={props.onClick}
      disabled={props.disabled}
      style={{ visibility: props.visibility, display: props.display }}
    >
      {props.text}
    </button>
  );
}

// 新增默认props设置
Btn.defaultProps = {
  type: 'button'
}

运行原理 #

你已经在Btn的type属性上写了step === Titles.length ? 'submit' : 'button'的判断逻辑，Titles数组长度为5，所以step为1-4时type值为button，点击按钮只会触发你写的onClick步骤跳转逻辑，不会触发表单提交；step为5时type自动切换为submit，点击按钮就会触发form的onSubmit提交事件。

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