我正在反應應用程式中創建一個自動完成選項，并生成帶有選項串列的自動完成欄位。
作業示例：
選項串列：
const options = [
{ label: "hello", value: "1" },
{ label: "codesandbox", value: "2" },
{ label: "react", value: "3" },
{ label: "nodejs", value: "4" },
{ label: "java", value: "5" },
{ label: "antd", value: "6" },
{ label: "dependency", value: "7" },
{ label: "less", value: "8" }
];
在這里，如果用戶選擇資料react，則輸入的值為3。
期待：
期望是輸入欄位需要具有文本，react但所選值需要是3。
所以對于用戶顯示，它需要在文本中，背景值將是數字。
參考這篇文章React Antd v4 自動完成在選擇選項時顯示選定的值而不是標簽，但它沒有任何幫助。
uj5u.com熱心網友回復：
正如@TheWhiteFang 回答的那樣，解決您的問題的一種解決方案是使用Select帶有showSearch道具的組件，但是如果您想使用AutoComplete另一種解決方案，可以定義兩個單獨的狀態，一個狀態用于輸入值，另一個狀態用于 selectedOption from AutoComplete。然后你可以通過道具onChange來管理你的狀態。onSelect像這樣：
const Complete = () => {
const [selectedOption, setSelectedOption] = React.useState('');
const [inputValue, setInputValue] = React.useState('');
const onSelect = (data, option) => {
setSelectedOption(option);
setInputValue(option.label);
};
const onChange = (data, option) => {
setInputValue(data);
setSelectedOption(option); // to remove selected option when user types something wich doesn't match with any option
};
return (
<AutoComplete
value={inputValue}
options={options}
autoFocus={true}
style={{width: 200}}
filterOption={(inputValue, option) =>
option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
}
onSelect={onSelect}
onChange={onChange}
/>
);
};
也許您需要根據您的要求在上面的示例中進行一些更改，無論如何您可以在 stackblitz 上找到上面的示例。
uj5u.com熱心網友回復：
那么AutoComplete is an 輸入component. What you need is選擇with搜索`。您提供的示例可以稍微實作以使其按您的意愿作業。您可能需要進行一些修改。下面的代碼只是為了演示如何更改它，不確定它是否會在沒有錯誤的情況下運行。
import { Select } from 'antd';
const { Option } = Select;
function onChange(value) {
console.log(`selected ${value}`);
}
const options = [
{ label: "hello", value: "1" },
{ label: "codesandbox", value: "2" },
{ label: "react", value: "3" },
{ label: "nodejs", value: "4" },
{ label: "java", value: "5" },
{ label: "antd", value: "6" },
{ label: "dependency", value: "7" },
{ label: "less", value: "8" }
];
function onSearch(val) {
console.log('search:', val);
}
ReactDOM.render(
<Select
showSearch
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{ options.map((option => <Option value={option.value}>{option.hellop}</Option>)) }
</Select>,
mountNode,
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412527.html
標籤：
上一篇：渲染方法應該是props和state的純函式。但我只是使用函式引數
下一篇：狀態總是一鍵延遲