Question

我使用Ruby on Rails作为后端，并使用React JS作为前端的一部分。我有一个带选项的select（下拉列表），我希望每个选项的值都是一个Javascript数组。此代码位于React类的渲染函数内。

...
<select defaultValue={<%= sections['All sections'] %>}  ref="sectionSelect">
    <% sections.each do |name, ids| %>
        <option value={<%= ids %>}><%= name %></option>
    <% end %>
</select>
...

sections是一个散列，其字符串指向数组。格式如下：

{
    'All sections' : [1, 2, 3, 4, 5],
    'Section A' : [1],
    'Section B' : [2],
    'Section C' : [3],
    'Section D' : [4],
    'Section E' : [5]
}

当我运行上面的代码时，我在HTML中得到类似的东西：

<select>
    <option value="1,2,3,4,5">All sections</option>
    <option value="1">Section A</option>
    <option value="2">Section B</option>
    <option value="3">Section C</option>
    <option value="4">Section D</option>
    <option value="5">Section E</option>
</select>

当我在浏览器中以调试模式暂停javascript函数时，我可以在浏览器控制台中运行this.refs.sectionSelect.state.value，因为React的默认值，它会给我一个数组（[1, 2, 3, 4, 5]）。但是一旦我将select更改为另一个选项，我得到数组的字符串表示形式（"1,2,3,4,5"）而不是数组本身。

有没有办法让它成为值实际上是数组而不只是字符串？如果是这样，怎么样？

如果您需要更多信息，请与我们联系。我已经添加了我认为相关的所有内容。

如果您知道如何解决此问题，请提前致谢。

Answer 1

ActiveModel有一个JSON序列化程序，可用于此目的。您正在寻找to_json和html_safe。

您的代码

<select defaultValue={<%= sections['All sections'] %>}  ref="sectionSelect">
<% sections.each do |name, ids| %>
    <option value={<%= ids %>}><%= name %></option>
<% end %>
</select>

应该是

<select defaultValue=<%= sections['All sections'] %>  ref="sectionSelect">
<% sections.each do |name, ids| %>
    <option value=<%= ids.to_json.html_safe %>><%= name %></option>
<% end %>
</select>

以获得

<select>
  <option value="[1,2,3,4,5]">All sections</option>
  <option value="[1]">Section A</option>
  <option value="[2]">Section B</option>
  <option value="[3]">Section C</option>
  <option value="[4]">Section D</option>
  <option value="[5]">Section E</option>
</select>

警告：在没有转义的情况下使用html_safe会让您在<script>标记内部时对XSS漏洞开放

HTML-选择具有数组值的选项

1 个答案: