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

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>

Answer 2

目前，您正在将样式应用于 form 而不是其中的 submit 输入。您可以使用子 select 或 select submit 输入作为 form 的子输入以获得纯 CSS 解决方案。

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

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

然后，使用正确的 class.

更新您的辅助方法

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

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

button_to 创建不可点击的按钮

button_to creates non-clickable button

html

css

ruby-on-rails

button-to

ruby-on-rails-4