在 Reactjs 中使用 Antd 自动完成
Autocomplete using Antd in Reactjs
我正在 React 应用程序中制作自动完成选项并生成带有选项列表的自动完成字段。
工作示例:
选项列表:
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" }
];
此处如果用户 select 数据 react
,则输入的值为 3
。
期望:
预期是输入字段的文本需要为 react
,但 selected 值需要为 3
。
所以为了用户展示,需要在文本中,背景值为数字。
参考了这个 post 但它没有任何帮助。
好吧 AutoComplete
是一个 input
组件。你需要的是 select
和 search
。您提供的示例可以稍微实现一下,以使其按您的需要工作。您可能需要进行一些修改。下面的代码只是为了演示如何更改它,不确定它是否 运行 没有错误。
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,
);
正如@TheWhiteFang 回答的那样,解决您问题的一种解决方案是使用 Select
组件和 showSearch
道具,但是如果您想使用 AutoComplete
另一个解决方案可以定义两个分离状态,一个状态用于输入值,另一个状态用于来自 AutoComplete
的 selectedOption。然后你可以通过 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}
/>
);
};
也许你需要根据你的需要对上面的例子做一些修改,无论如何你可以找到上面的例子Here on stackblitz。
我正在 React 应用程序中制作自动完成选项并生成带有选项列表的自动完成字段。
工作示例:
选项列表:
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" }
];
此处如果用户 select 数据 react
,则输入的值为 3
。
期望:
预期是输入字段的文本需要为 react
,但 selected 值需要为 3
。
所以为了用户展示,需要在文本中,背景值为数字。
参考了这个 post
好吧 AutoComplete
是一个 input
组件。你需要的是 select
和 search
。您提供的示例可以稍微实现一下,以使其按您的需要工作。您可能需要进行一些修改。下面的代码只是为了演示如何更改它,不确定它是否 运行 没有错误。
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,
);
正如@TheWhiteFang 回答的那样,解决您问题的一种解决方案是使用 Select
组件和 showSearch
道具,但是如果您想使用 AutoComplete
另一个解决方案可以定义两个分离状态,一个状态用于输入值,另一个状态用于来自 AutoComplete
的 selectedOption。然后你可以通过 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}
/>
);
};
也许你需要根据你的需要对上面的例子做一些修改,无论如何你可以找到上面的例子Here on stackblitz。