如何使用数组作为反应选择组件的选项

Question

如果我想更换选项

<option value="A">Apple</option>
<option value="B">Banana</option>

在给定的示例中，在 React jsx 文件中使用数组，我将如何继续？

<select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
</select>

Answer 1

因为它只是 javascript，所以有一百万种方法。我通常采取的方式是映射容器来生成内脏。 for 循环或其他任何东西也可以正常工作。

const Answer = react.createClass({

    render: function() {

        var Data     = ['this', 'example', 'isnt', 'funny'],
            MakeItem = function(X) {
                return <option>{X}</option>;
            };


        return <select>{Data.map(MakeItem)}</select>;

    }

};

或者在 es6 中更现代的 React 中你可以

const Answer = props => 
  <select>{
    props.data.map( (x,y) => 
      <option key={y}>{x}</option> )
  }</select>;

Answer 2

您通常需要提供一个唯一的密钥以确保 React 可以识别项目，您可以使用 uuid 来执行此操作或使用您手头的密钥，例如

  <Select name={field}>
    {FBButtons.map(fbb =>
      <option key={fbb.key} value={fbb.key}>{fbb.value}</option>
    )};
  </Select>

Answer 3

我来这里寻找一种在服务器端渲染的 React 应用程序中使用数组作为选项的方法。接受的答案帮助我找到了有效的方法。举个例子，给定一个名为

data

的字符串数组和一个名为

selectedOpton

的字符串（它等于

data

中的字符串之一，如

data[0]

:

            <select value={selectedOption} onChange={function(){}} >
              {data.map( (e) => <option value={e} key={e}>{e}</option> )}
            </select>

当提交此部分的表单时，我会自动获得所选结果。由于它是服务器端呈现的，因此在发送到浏览器之后直到提交表单之前不会执行任何 JavaScript。包含

onChange={function(){}}

的唯一原因是为了抑制因

value={selectedOption}

而导致的不合逻辑的错误。 React 坚持认为，如果分配了值，则必须定义 onChange，即使它是服务器端渲染的，这意味着 onChange 永远不会被触发。

Answer 4

这是一个很老的问题，但我刚刚发现它并想投入我的两分钱。我发现几个答案很有帮助，他们引导我找到了这个对我有用的答案。我试图填充一个下拉列表，供用户选择他们居住的州。这是我的州数组：

const states = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

这是我的

select

 中包含 

.jsx

元素的 div

                <label htmlFor="addressState">addressState</label>
                <select value={addressState} onChange={(event) => setAddressState(event.target.value)}>
                    {states.map((e,index) => <option key={index} value={e}>{e}</option>
                    )}
                </select>
            </div>

希望对某人有帮助

附注我将变量称为

addressState

以避免混淆，因为 React 经常使用状态这个词。

Answer 5

您还可以将常量抽象到另一个文件中并导入它们。

import {myconstants} from "../constants";

{myconstants.map((x,y) => <option key={y}>{x}</option>)}