리액트 및 레일로 양식을 작성하는 방법

리액트 및 레일로 양식을 작성하는 방법

Rails에서는 form_for 태그를 사용하여 폼을 작성합니다.

Rails는 사이트 간 요구 위조(CSRF)에 대한 보안을 위해 authenticity_token 등의 HTML 폼을 자동으로 생성합니다.

React에서는 JSX를 사용하기 때문에 React 컴포넌트에서 erb를 렌더링할 수 없습니다.

React 컴포넌트에서는 HTML을 수동으로 씁니다.

Rails 앱에서 React를 사용하고 싶은데 Rails의 장점이 있습니다.

또는 앱의 V로 React를 사용할 때 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="&#x2713;" /><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>

붙여넣을 수 있습니다.authenticity_token반응 성분으로 변환합니다.

사용.gem react-rails

= react_component 'Form', authenticity_token: form_authenticity_token

form_authenticity_token레일 도우미입니다.

그래서 폼에 붙일 수 있어요.

<form role='form' accept-charset="UTF-8" action='/action' method='post'>
  ...
  <input type='hidden' name='authenticity_token' value={this.props.authenticity_token} />
  ...
</form>

그건 최선의 해결책이 아니에요.누군가 더 나은 해결책을 말해줬으면 좋겠어요.

다음과 같은 작업을 수행할 수 있습니다.

$(document).ready(function(){
  $.ajaxSetup({
    headers: {
      'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    }
  });
});

그리고...csrf-token메타 태그로 변환합니다(이미 존재하지 않는 경우).

기본 HTML을 Rails로 렌더링하고 React 컴포넌트를 포함하는 경우react-rails, 다음과 같이 쓸 수 있습니다.

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>
    );
  }
});

보이지 않는 블록 내에서 폼을 렌더링한 후 반응 구성요소로 복제할 수 있습니다.

/* 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]
  )

이게 도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/31228415/how-to-create-forms-with-react-and-rails