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输入。您可以使用子选择器选择submit输入作为纯{CSS}解决方案的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类的成员，它看起来会一样。

Answer 2

button_to不允许您应用类或自定义提交输入。

相反，如果您需要这种灵活性，则可以使用form_tag手动创建表单。 编辑以展示它在演示者中的工作方式。

class CoursePresenter
  def initialize(helpers)
    @h = helpers
  end

  def new_course_button
    h.form_for("/new-course") do
      h.submit_tag "/new-course",
        class: 'start-course-button is-normal start-course'
    end
  end

  private
  attr_reader :h
end

您还可以使用针对输入元素而不是表单的CSS规则：

.start-course-button input[type="submit"] {
  border: 2px solid black;
  padding: 10px 15px;
  background-color: pink;
}

<form class="start-course-button">
  <input type="submit" value="Click me">
</form>

button_to创建不可点击的按钮

2 个答案: