/* eslint-disable import/named */ /* eslint-disable no-unused-vars */ import React from "react"; import { withRouter} from "react-router-dom"; import PropTypes from "prop-types"; import { Select } from "antd"; const { Option } = Select; const selectProps = { mode: "multiple", maxTagCount: "responsive", showSearch: true, showArrow: true, dropdownStyle: { zIndex: 2000 }, filterOption: (input = "", option = "") => option?.children?.toLowerCase()?.indexOf(input?.toLowerCase()) >= 0 }; const SelectD = ({}) => { const List = ["one","two","three"] return ( <div> <> <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}> <Col span={16}> <Form.Item label="List" name="List" fieldKey="List"> <Select {...selectProps}>{List}</Select> </Form.Item> </Col> </Row> <Divider /> <Row > <Button className="next" htmlType="submit"> Confirm </Button> </Row> </> </div> ); };así que tengo una lista de matriz = ["uno", "dos", "tres"] Estos valores que necesito enviar en el diseño de hormiga del formulario desplegable seleccionado https://codesandbox.io/s/z8nf4?file=/index. js similar a este código, pero en su lugar necesito enviar una matriz como esta
Simplemente reproduzca el código que vio en la zona de pruebas que vinculó:
// .... // .... const SelectD = ({}) => { const List = ["one","two","three"] return ( <div> <> <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}> <Col span={16}> <Form.Item label="List" name="List" fieldKey="List"> <Select {...selectProps}>{List.map(item => (<Option key={item}>item</Option>)}</Select> </Form.Item> </Col> </Row> <Divider /> <Row > <Button className="next" htmlType="submit"> Confirm </Button> </Row> </> </div> ); };Este es el código de trabajo de su sandbox:
import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import "./index.css"; import { Select } from "antd"; const { Option } = Select; const children = []; const Lists = ["one", "two", "three"]; Lists.map((item, index) => { children.push(<Option key={index}>{item}</Option>); }); function handleChange(value) { console.log(`selected ${value}`); } ReactDOM.render( <> <Select mode="multiple" allowClear style={{ width: "100%" }} placeholder="Please select" defaultValue={[]} onChange={handleChange} > {children} </Select> </>, document.getElementById("container") );