在 Reactjs 中使用 Antd 自动完成

Question

我正在 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 但它没有任何帮助。

Answer 1

好吧 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,
);

Answer 2

正如@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。

在 Reactjs 中使用 Antd 自动完成

Autocomplete using Antd in Reactjs

javascript

reactjs

typescript

autocomplete

antd