/* 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>
);
};
所以我有一個陣列 List=["one", "two", "three"] 這些 val 我需要在選擇下拉表單 ant design https://codesandbox.io/s/z8nf4?file=/index.js 中發送。 js 類似于此代碼，但我需要發送這樣的陣列
uj5u.com熱心網友回復：
只需重現您在鏈接的沙箱中看到的代碼：
// ....
// ....
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>
);
};
uj5u.com熱心網友回復：
這是您沙箱中的作業代碼：
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")
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/355184.html
標籤：javascript 反应 蚂蚁
上一篇：為什么提示在我的函式中不起作用？