ant输入字段中的object对象

Question

任何关于如何摆脱antd输入内部的[object object]的想法，似乎在map选项内部我有<br/>是什么导致了这种情况，如何在映射中包含
而不在输入中包含它？在地图里面，它会导致他们互相压迫，这就是我在那里使用它的原因。那么，你知道如何不把它输入吗？

import "antd/dist/antd.css";
import { Button, AutoComplete } from "antd";
import { CloseOutlined } from "@ant-design/icons";
const EventsSection = () => {
const autoControl = React.createRef();
const defaultOptions = [
{ value: "1", text: "Nicholas" },
{ value: "2", text: "Alex" },
{ value: "3", text: "Putin" },
{ value: "4", text: "Biden" },
{ value: "5", text: "Peka" },
{ value: "6", text: "James" },
{ value: "7", text: "James" }
];
const [options, setOptions] = useState(defaultOptions);
const [selectedOption, setSelectedOption] = useState({ value: "", text: "" });
const [dropdownOpen, setDropdownOpen] = useState(true);
const { Option } = AutoComplete;
const changeHandler = (_, option) => {
const value = option.children;
setSelectedOption({ value: option.key, text: value });
};
function handleClick() {
console.log(`value: ${selectedOption.value}, text: ${selectedOption.text}`);
}
function onClear() {
setSelectedOption({ value: "", text: "" });
}
function onFocusChange() {
if (!dropdownOpen) setDropdownOpen(true);
}
function onSearch(value) {
setOptions(
defaultOptions.filter((f) =>
f.text.toLowerCase().includes(value.toLowerCase())
)
);
}
return (
<div>
{/* when found in search i want this button take to  'onChange' address also*/}
<button disabled={!selectedOption.value} onClick={handleClick}>
click me when found in search
</button>
<AutoComplete
ref={autoControl}
open={dropdownOpen}
style={{ width: 200 }}
placeholder="Search..."
listHeight={220}
onSearch={(e) => onSearch(e)}
onChange={changeHandler}
value={selectedOption.text}
onFocus={onFocusChange}
onBlur={() => setDropdownOpen(false)}
>
{options.map((option) => (
<Option key={option.value} value={option.value}>
{option.text}
<br />
{option.value}
</Option>
))}
</AutoComplete>
<Button
disabled={!selectedOption.value}
onClick={onClear}
type="primary"
icon={<CloseOutlined />}
/>
</div>
);
};
export default EventsSection;

Answer 1

尝试从输入字段值中筛选出对象元素，因为它是一个数组

const changeHandler = (_, option) => {
const value = option.children.filter((each) => typeof each !== 'object');
setSelectedOption({ value: option.key, text: value });
};