多个客户不同的 ID [英] multiple customer different id's
问题描述
这里是React初学者，英文不是我的母语所以很抱歉有错误，这里我有一个输入，按钮和下拉(选择选项)，'value'代表id，'text'代表客户，这里我有问题，当用户点击客户james"(我有两个)时，它会选择他们两个，如何更正它应该选择被点击的那个?如果我没有同名的用户，则一切正常，我的代码:
import React, { useState } from "react";从react-dom"导入 ReactDOM；导入antd/dist/antd.css"；import { Button, AutoComplete } from "antd";从@ant-design/icons"导入 { CloseOutlined };导出默认函数 EventsSection() {const autoControl = React.createRef();const defaultOptions = [{ 值:1"，文本:尼古拉斯"},{ 值:2"，文本:亚历克斯"；},{ 值:3"，文本:普京"},{ 值:4"，文本:拜登"},{ 值:5"，文本:Peka"},{ 值:6"，文本:詹姆斯"},{ 值:7"，文本:詹姆斯"}];const [options, setOptions] = useState(defaultOptions);const [selectedOption, setSelectedOption] = useState("");const [dropdownOpen, setDropdownOpen] = useState(true);const [selectedValue, setSelectedValue] = useState("");const { 选项 } = 自动完成；const changeHandler = (text) =>{setSelectedOption(text);if (options.filter((f) => f.text === text).length) {setSelectedValue(options.filter((f) => f.text === text)[0].value);} 别的 {设置选项(默认选项)；setSelectedValue("");}如果 (!text || !text.length) {setDropdownOpen(false);autoControl.current.blur();}};函数 handleClick() {const id = selectedValue;console.log(`value: ${id}, text: ${selectedOption}`);//history.push(`/customer/${id}`);}函数 onClear() {changeHandler("");}函数 onFocusChange() {if (!dropdownOpen) setDropdownOpen(true);}函数 onSearch(value) {设置选项(defaultOptions.filter((f) =>f.text.toLowerCase().includes(value.toLowerCase())));}返回 (<div>{/* 当在搜索中找到时，我希望这个按钮也带到onChange"地址*/}<button disabled={!selectedValue} onClick={handleClick}>在搜索中找到时点击我<自动完成ref={自动控制}打开={下拉打开}样式={{ 宽度:200 }}placeholder="搜索...";列表高度={220}onSearch={(e) =>onSearch(e)}onChange={changeHandler}值={selectedOption}onFocus={onFocusChange}>{options.map((option) => (<Option key={option.value} value={option.text}>{option.text}</选项>))}</自动完成><按钮禁用={!selectedValue}onClick={onClear}类型=主要"icon={);}ReactDOM.render(
理想情况下，自动完成将允许您单独设置显示/值成员，但我对这些组件不是很熟悉，因此我对此页面可以更改您处理自动完成状态的方式，但现在它可以按照您的意愿工作.
https://codesandbox.io/s/乐观-bhaskara-m2vm2?file=/src/component.js
const [selectedOption, setSelectedOption] = useState({ value: "", text: "" });
<自动完成ref={自动控制}打开={下拉打开}样式={{ 宽度:200 }}placeholder="搜索...";列表高度={220}onSearch={(e) =>onSearch(e)}onChange={changeHandler}值={selectedOption.text}onFocus={onFocusChange}>{options.map((option) => (<Option key={option.value} value={option.value}>{option.text}</选项>))}我还更改了更改处理程序以包含 option 作为参数，并基于此设置 selectedOption 状态.
React beginner here, English is not my mother language so sorry for mistakes, here I have an input, button and dropdown(select options), 'value' represents id and 'text' represents customer, here I have a problem, when user clicks customer 'james' (I have two of them) it will choose both of them, how to correct it that it should choose that which is clicked? everything is working correctly if I don't have users with the same name, my code:
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"));
Ideally the autocomplete would allow you to set the display/value members separately, but I'm not very familiar with these components so instead I did a small refactor on this page to change the way you're handling the state of the autocomplete, but now it works like you want it to.
https://codesandbox.io/s/optimistic-bhaskara-m2vm2?file=/src/component.js
const [selectedOption, setSelectedOption] = useState({ value: "", text: "" });
<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>
))}
I also changed the change handler to include option as a parameter and am setting the selectedOption state based on that.
这篇关于多个客户不同的 ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
