javascript - 我怎样才能让这个下拉列表显示所有五十个州而不是“选项#”

Question

现在，这段代码显示了一个列出“选项#”的下拉表单。如何使所有 50 个州都可选择而不是选项和数字？

import React, { useState } from 'react';
    
    import { 
        Box, 
        FormField, 
        Grommet, 
        Select, 
        MaskedInput,
        TextInput 
    } from 'grommet';
    import { grommet } from 'grommet/themes';
    
    const allOptions = Array(50)
      .fill()
      .map((_, i) => `option ${i + 1}`);
    
    export const Simple = () => {
      const [value, setValue] = useState('');
    
      return (
        <Grommet theme={grommet}>
          <Box align="center"  background="light-2" >
            <FormField label="State" htmlFor="select" >
              <Select
                id="select"
                placeholder="placeholder"
                options={allOptions}
                value={value}
                onChange={({ option }) => setValue(option)}
              />
            </FormField>
    </Box>
                </Grommet>
      );
    };
    export default {
      title: 'Input/FormField/Simple',
    };

Answer 1

如果您的应用需要，请注意使用 Form+FormField 包装器。如果不需要 Form 上下文，请删除 FormField 包装器。

import React, { useState } from "react";
import { render } from "react-dom";

import { Box, FormField, Grommet, Select } from "grommet";
import { grommet } from "grommet/themes";

// https://gist.github.com/tleen/6299431
const allOptions = [
  "Alabama",
  "Alaska",
  "American Samoa",
  "Arizona",
  "Arkansas",
  "California",
  "Colorado",
  "Connecticut",
  "Delaware",
  "District of Columbia",
  "Federated States of Micronesia",
  "Florida",
  "Georgia",
  "Guam",
  "Hawaii",
  "Idaho",
  "Illinois",
  "Indiana",
  "Iowa",
  "Kansas",
  "Kentucky",
  "Louisiana",
  "Maine",
  "Marshall Islands",
  "Maryland",
  "Massachusetts",
  "Michigan",
  "Minnesota",
  "Mississippi",
  "Missouri",
  "Montana",
  "Nebraska",
  "Nevada",
  "New Hampshire",
  "New Jersey",
  "New Mexico",
  "New York",
  "North Carolina",
  "North Dakota",
  "Northern Mariana Islands",
  "Ohio",
  "Oklahoma",
  "Oregon",
  "Palau",
  "Pennsylvania",
  "Puerto Rico",
  "Rhode Island",
  "South Carolina",
  "South Dakota",
  "Tennessee",
  "Texas",
  "Utah",
  "Vermont",
  "Virgin Island",
  "Virginia",
  "Washington",
  "West Virginia",
  "Wisconsin",
  "Wyoming"
];

export const App = () => {
  const [value, setValue] = useState("");

  return (
    <Grommet theme={grommet}>
      <Box align="center" background="light-2">
        <FormField label="State" htmlFor="select">
          <Select
            id="select"
            placeholder="placeholder"
            options={allOptions}
            value={value}
            onChange={({ option }) => setValue(option)}
          />
        </FormField>
      </Box>
    </Grommet>
  );
};

render(<App />, document.getElementById("root"));