Question

我今天早上尝试不做一些愚蠢的事，但我发现自己喜欢使用HTML5 html.erb属性。我已经安装了country_select rails gem，它在<%= f.country_select :location, { priority_countries: ["GB", "US"], selected: "GB" } %>中的效果很好，在一个表单中：

<div id="foo" data-countries="<%= f.country_select :location, { priority_countries: ["GB", "US"], selected: "GB" } %>"></div>

我把它拉入Reactjs的愚蠢方法是：

html.erb：

getInitialState: function() {
  return {
    location: this.props.data.location
  }
},

geo: function(event) {
  this.setState({location: event.target.value});
},

render: function(){
  var bar = document.getElementById('foo');  

  return (
      <div>
        <select
           value={this.state.location}
           onChange={this.geo}
         >
           <option value="" selected disabled>Please select</option>
           <option value="{bar.dataset.countries}">{bar.dataset.countries}</option>
         </select>
      </div>
    )
 }

对于上述内容，我通常会为方法执行此操作。

js.jsx：

data-countries

在我的观看中，html.erb中<select name=导致所有国家/地区都被吐出。同样在呈现的下拉菜单中，我看到“请选择”和{{1}}

我知道我在做什么是100％不正确。有没有正确的方法来做这个，如果可能的话，这个宝石？

Answer 1

我找到了！基本上你需要get the name from the country gem：

在您的用户模型中：

def country
  country = ISO3166::Country
  c = country.all
  c.map do |a| a.name end
end

现在位于相应控制器的某处：

def method_name
 c = User.new
 # Calling the method from user.rb
 @country = c.country
end

因为我在我的观点中使用react-rails：

<%= react_component('NewProject', { country: @country }) %>

<强> js.jsx：

render: function(){
  var country = (c) => (<option key={c} value={c}>{c}</option>) 

  return (
      <div>
        <select
           value={this.state.location}
           onChange={this.geo}
         >
           <option value="" selected disabled>Please select</option>
           {this.props.country.map(country)}
         </select>
      </div>
    )

现在我得到了我的下拉。希望这对其他人有用！

Rails Country_在ReactJs中选择Gem

1 个答案: