React ve Rails ile formlar nasıl oluşturulur?

Question

Raylar ile form_for etiketini kullanarak formlar oluşturun.

Platformlar, Site İçi Talep Sahteciliğine (CSRF) karşı güvenlik için authenticity_token dahil olmak üzere HTML formunu otomatik olarak oluşturur.

Tepki Ben JSX kullanıyorum, bu nedenle bir React bileşeninde erb oluşturamıyorum.

Bir React bileşeninde HTML'yi elle yazarım.

Rails uygulamasında React özelliğini kullanmak ve yine de Rails avantajlarına sahip olmak istiyorum.

Veya, Uygulamamın Vurgusunu Vur kullanırken form_for'un Rails avantajlarını elde etmenin bir yolu yoksa, nasıl React bileşeni olarak uygun bir form yazabilirim?

Form_for'umu önce yazıp HTML'ye bakıp kopyalayıp React bileşenime yapıştırırsam, bu iyi bir fikir midir? Böyle bir şey yapabiliriz

<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>

Answer 1

Reaksiyon bileşenine authenticity_token yapıştırabilirsiniz. gem react-rails

= react_component 'Form', authenticity_token: form_authenticity_token 

form_authenticity_token kullanma

raylar yardımcısıdır.

Böylece formunuza yapıştırabilirsiniz.

En iyi çözüm bu değil. Birisi daha iyi bir çözüm önerecek olursam mutlu olurdum. Rails ile taban HTML işlemek ve react-rails ile kendisine bileşeni tepki katıştırırsanız

Answer 2

:

burada Örneğin

form_for HTML oluşturulur

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

ve iç meta etiketine csrf-token koymak senin zaten yoksa görünümü/düzeni.

Answer 3

, böyle yazabilirsiniz:

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

Answer 4

Sen görünmez bir blokunun içinde formu işlemek ve daha sonra bir içine klonlarız bileşeni reaksiyona

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

Bu yardımcı olur umarım.