html - button_to 创建不可点击的按钮

Question

我注意到 button_to 有一个奇怪的行为。我有一些程式化的按钮。当 button_to 生成时，输入提交字段被放置在按钮元素内。最终发生的是单击按钮的内边缘不会将用户重定向到新页面。用户被迫直接点击文本进行重定向。

我的问题是，我该如何解决这个问题？我不认为 CSS 是一个可能的解决方案。理想情况下，我想将我在 button_to 方法中传递的类应用到输入字段。这样输入字段就变成了按钮而不是表单。

这里是 button_to 方法。

button_to("Click me!", 
          "/new-course",   
          {class: 'start-course-button is-normal start-course'}
         ).html_safe

这是生成的 html。

<form class="start-course-button is-normal start-course" method="post" action="/new-course">
  // This must be clicked below and not the form itself for there to be a redirect
  <input type="submit" value="Click me!">

  <input type="hidden" name="authenticity_token" value="secret_auth_token">
</form>

Answer 1

目前，您正在将样式应用到 form 而不是其中的 submit 输入。对于纯 CSS 解决方案，您可以使用子选择器选择 submit 输入作为 form 的子选择器。

为清楚起见，创建一个新类以应用于表单。此类将选择类型为 submit 的子输入。

.start-course-form input[type="submit"] {
/* button styles */
}

然后，使用正确的类更新您的辅助方法。

button_to("Click me!", 
          "/new-course",   
          {class: 'start-course-form is-normal start-course'}
         ).html_safe

请注意，这不会使按钮成为 start-course-button 类的成员，它只是看起来一样。