Javascript 多个不同id的客户

这里是React初学者，英语不是我的母语，很抱歉出错，这里我有一个输入，按钮和下拉选择选项，'value'代表id，'text'代表客户，这里我有一个问题，当用户单击客户'james'时，我有两个，它会选择两个，如何纠正它应该选择哪个被点击？如果没有具有相同名称的用户，我的代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Button, AutoComplete } from "antd";
import { CloseOutlined } from "@ant-design/icons";

export default function 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("");
  const [dropdownOpen, setDropdownOpen] = useState(true);
  const [selectedValue, setSelectedValue] = useState("");

  const { Option } = AutoComplete;

  const changeHandler = (text) => {
    setSelectedOption(text);
    if (options.filter((f) => f.text === text).length) {
      setSelectedValue(options.filter((f) => f.text === text)[0].value);
    } else {
      setOptions(defaultOptions);
      setSelectedValue("");
    }
    if (!text || !text.length) {
      setDropdownOpen(false);
      autoControl.current.blur();
    }
  };

  function handleClick() {
    const id = selectedValue;
    console.log(`value: ${id}, text: ${selectedOption}`);
    //history.push(`/customer/${id}`);
  }

  function onClear() {
    changeHandler("");
  }

  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={!selectedValue} 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}
        onFocus={onFocusChange}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.text}>
            {option.text}
          </Option>
        ))}
      </AutoComplete>
      <Button
        disabled={!selectedValue}
        onClick={onClear}
        type="primary"
        icon={<CloseOutlined />}
      />
    </div>
  );
}

ReactDOM.render(<EventsSection />, document.getElementById("container"));

---

为了解决这个问题，我想你需要做的就是将选项组件的值设置为选项列表中的唯一键

例如：

<Option key={option.value} value={option.value}>
  {option.text}
</Option>

---

目标应该是让您的自动完成显示选项.text，但根据选项.value设置值和状态。

理想情况下，自动完成允许您单独设置显示/值成员，但是我对这些组件不是很熟悉，所以我在这一页上做了一个小的重构来改变你处理自动完成状态的方式，但是现在它可以像你所希望的那样工作

const[selectedOption，setSelectedOption]=useState{value:，text:}

---

我还将更改处理程序更改为包含选项作为参数，并基于此设置selectedOption状态。

如果我喜欢，它将在输入字段中显示值，而不是在客户名称中显示值。啊，你说得对，我错了，请参阅我的其他注释以获得更好的修复。现在这些其他功能不像“CloseOutlined”那样工作，它应该是这样工作的：您可以使用您的代码使这些其他功能也工作吗？在我的示例中，“清除”按钮现在应该工作了。为什么这不起作用？{option.text}{option.value}在下拉列表中，我想让'text'和'value'相互作用，但在输入中，它给了Putin，[object object]，3，如何摆脱object object？因此，在这种情况下，你实际上可以做另一个简单的重构，设置value={option.text}然后将子项更改为您想要的任何内容，您将停止在更改处理程序中引用子项。您可以这样做：{option.text}{option.value}，然后您的更改处理程序可以简化为：constchangehandler=\uu，option=>{setSelectedOption{value:option.key，text:option.value}；}；

<AutoComplete
        ref={autoControl}
        open={dropdownOpen}
        style={{ width: 200 }}
        placeholder="Search..."
        listHeight={220}
        onSearch={(e) => onSearch(e)}
        onChange={changeHandler}
        value={selectedOption.text}
        onFocus={onFocusChange}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.value}>
            {option.text}
          </Option>
        ))}