如何使用 React 和 Rails 创建表单?
Posted
技术标签:
【中文标题】如何使用 React 和 Rails 创建表单?【英文标题】:How to create forms with React and Rails? 【发布时间】:2015-09-22 13:42:04 【问题描述】:在 Rails 中,我使用 form_for 标签创建表单。
Rails 自动生成 html 表单,包括用于防止跨站请求伪造 (CSRF) 的安全性令牌。
在 React 中我使用 JSX,所以我无法在 React 组件中渲染 erb。
在 React 组件中,我手动编写 HTML。
我想在我的 Rails 应用程序中使用 React,并且仍然拥有 Rails 的优势。
或者,如果在我的应用程序中使用React作为V时无法获得form_for的Rails优势,我该如何编写一个合适的表单作为React组件?
如果我先编写 form_for,然后查看呈现的 HTML,将其复制并粘贴到我的 React 组件中,这是个好主意吗?
例如这里是从 form_for 渲染的 HTML:
<form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="1AXH9blzaH4qEAAWTvu6aAH84btA/9DZCpFDBhiJ0/H9uAKsPAB/rFQWY1VmWA1yNtFaigO50p6joa3X8CItBA==" />
<div class="field">
<label for="user_Имя">Имя</label><br>
<input placeholder="Бил Гейтс" type="text" name="user[name]" id="user_name" />
</div>
<div class="actions">
<input type="submit" name="commit" value="Открыть заявку" class="button tiny" />
</div>
</form>
【问题讨论】:
据我所知,您无法真正做到两全其美。如果您使用form_for
,您将获得 Rails 的所有优势,但 React 不会知道表单的 DOM,因此它无法完成它的工作。
最大的问题是:你想用 React 在你的表单中做什么?
你也许可以使用 LinkState React mixin。它允许您将表单输入绑定到组件的状态。从那里,您可以处理提交回 Rails(通过 API)。 facebook.github.io/react/docs/…
我们应该开发生成 jsx 组件的 rails 助手:form_for_jsx
【参考方案1】:
您可以将authenticity_token
粘贴到 react 组件中。
使用gem react-rails
= react_component 'Form', authenticity_token: form_authenticity_token
form_authenticity_token
是 rails 助手。
这样您就可以将其粘贴到您的表单中。
<form role='form' accept-charset="UTF-8" action='/action' method='post'>
...
<input type='hidden' name='authenticity_token' value=this.props.authenticity_token />
...
</form>
这不是最好的解决方案。如果有人能提供更好的解决方案,我会很高兴。
【讨论】:
【参考方案2】:你可以这样做:
$(document).ready(function()
$.ajaxSetup(
headers:
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
);
);
如果csrf-token
不存在,则将其放入视图/布局内的元标记中。
【讨论】:
【参考方案3】:如果你用 Rails 渲染基础 HTML 并用 react-rails
嵌入一个 React 组件,你可以这样写:
var YourForm = React.createClass(
render: function()
var csrfToken = $('meta[name=csrf-token]').attr('content');
return (
<form action='/users' method='post' accept-charset='UTF-8'>
<input type='hidden' name='_method' value='patch' />
<input type='hidden' name='utf8' value='✓' />
<input type='hidden' name='authenticity_token' value=csrfToken />
...
</form>
);
);
【讨论】:
【参考方案4】:你可以在一个不可见的块中渲染你的表单,然后将它克隆到一个反应组件中
/* app/assets/stylesheets/users.scss */
.invisible-form-container
display: none;
# app/views/users/edit.html.haml
.invisible-form-container
= render 'form'
.react-container
# app/assets/javascripts/components/form.js.jsx.coffee
class @Form extends React.Component
html_form: ->
__html: $('.invisible-form-container').html()
render: ->
`<div dangerouslySetInnerHTML=this.html_form() />`
# app/assets/javascripts/initializer.coffee
$ ->
ReactDOM.render(
`<Form />`,
$('.react-container')[0]
)
希望这会有所帮助。
【讨论】:
以上是关于如何使用 React 和 Rails 创建表单?的主要内容,如果未能解决你的问题,请参考以下文章
Rails - 如何向用 javascript 创建的表单添加 CSRF 保护?