const ItemOptions: SelectValueInterface[] = Item.map((e) => ({
value: e.ItemId,
label: `${e.ItemName} (Item ID : ${e.ItemId})`,
}));
const options = [
{
label: 'ITEM NAME (Item ID)',
options: ItemOptions,
},
];
const formatGroupLabel = (data: any) => (
<div className={styles.formatGroupLabel}>
<span>{data.label}</span>
</div>
);
<Select
placeholder="Select Name"
options={options}
formatGroupLabel={formatGroupLabel}
classNamePrefix="select-list"
value={ItemOptions.filter((option) => option.value === selectedItemId)}
onChange={filterByItemID}
/>;
当我输入搜索/排序时，Item ID它会显示所有选项。我想不检测(Item ID: number)。
有没有办法即使在搜索其他内容后也始终在菜单上显示所选选项
这是我使用的代码
import React from "react";
import Select from "react-select/async";
const CheckboxDropdown = ({
options,
defaultValue,
loadOptions,
handleCheckboxSelect,
}) => {
const selectDefaultValue = defaultValue;
return (
<div className="flex">
<Select
defaultMenuIsOpen
defaultOptions={options}
cacheOptions
loadOptions={loadOptions}
options={options}
defaultValue={defaultValue}
isMulti
onChange={handleCheckboxSelect}
noOptionsMessage={() => "No options available"}
className="w-full"
isClearable={false}
placeholder="Type site name..."
/>
</div>
);
};
export default CheckboxDropdown;
我目前正在使用react-select和是的进行验证，反应选择组件的代码如下所示
import React, { useState, useMemo } from "react";
import Select from "react-select";
import countryList from "react-select-country-list";
function CountrySelector({ register }) {
const [value, setValue] = useState("");
const options = useMemo(() => {
return countryList().getData();
}, []);
const changeHandler = (value) => {
setValue(value);
console.log(value);
};
// console.log(countryList().getData())
return (
<>
<div className="mb-2.5">
<Select
placeholder="Select a Country"
className=""
options={options}
value={value}
{...register}
onChange={changeHandler}
/>
</div>
</>
);
}
export default CountrySelector;
我的架构如下所示：
const schema = yup.object().shape({
email: yup
.string()
.required("This field …我的反应项目“react”：“^18.2.0”版本和“react-select”：“5.4.0”版本今天出现错误，该项目直到昨天都运行顺利。
当我尝试构建我的项目时，它给了我下面的错误。
TS2322: Type '{ color: THEME.defaultHighLightColor; zIndex: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[] | undefined; alignContent?: Property.AlignContent | readonly string[] | Property.AlignContent[] | undefined; ... 953 more ...; label?: string | undefined; }' is not assignable to type 'CSSObjectWithLabel'. Type '{ color: THEME.defaultHighLightColor; zIndex: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[] | undefined; alignContent?: Property.AlignContent | readonly string[] | Property.AlignContent[] | undefined; ... 953 more ...; label?: string | undefined; }' is not assignable to type …只是想知道我在这里做错了什么。当我从列表中选择一个值时，组件输入字段不会被该值填充。
class Search extends Component {
constructor(props) {
super(props);
this.state = {
name: 'order_select_field',
placeholder: "Make a selection",
}
}
componentWillMount () {
fetch('http://apirequest.com')
.then( function(response) {
return response.json();
})
.then(function(json) {
this.setState({options: json});
}.bind(this))
}
handleChange(event) {
this.setState({ })
}
render() {
return (
<div>
<Select
name={this.state.name}
options={this.state.options}
placeholder={this.state.placeholder}
/>
</div>
)
}
}
当我提供loadOptions给Async控件时，它将在安装时加载选项。
如果我通过了，autoload={false}那么它既不会装载选项，也不会装载选项。但是它会在第一次关闭时加载选项（或键入或模糊）。
如果我通过了，onCloseResetsInput={false}那么在我键入某些内容之前它不会加载选项。（在菜单中显示“搜索类型”）
Async提供onOpen处理程序，但在这种情况下我没有找到使用它的方法。（并且react-select@2.0.0-alpha.2没有它）
因此，用户需要键入一个字符，然后将其删除，以查看选项的完整列表。
如何避免这种情况？
我正在使用这个反应选择https://github.com/JedWatson/react-select
他们正在使用
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry'},
{ value: 'vanilla', label: 'Vanilla' }
];
我的阵列设置如下不同
const columns = [
{ name: 'OrderNumber', title: 'Order Number' },
{ name: 'strawberry', title: 'Strawberry' },
{ name: 'vanilla', title: 'Vanilla' }
]
我无法改变我的阵列.我尝试使用'name'但select-react具有相同的名称props'name'.如果我将"名称"更改为"值",则会填充选择选项.但是我不想这样做.
任何人都可以教我如何通过编码将数组的"名称"更改为"值"？不是手动;)
在我的“反应选择”下拉列表中，标签长数百个字符。在“控制”芯片中，我想显示下拉菜单中的简短版本。这可能吗？
编辑：我要设置芯片的文本，而不是像素宽度。
鉴于我无法直接使用内部react-testing-library组件进行测试，我将如何测试使用该组件的组件react-select？例如，如果我有一个基于的值的条件渲染，而该值react-select不渲染传统渲染器<select/>，我还能触发更改吗？
import React, { useState } from "react";
import Select from "react-select";
const options = [
{ value: "First", label: "First" },
{ value: "Second", label: "Second" },
{ value: "Third", label: "Third" },
];
function TestApp() {
const [option, setOption] = useState(null);
return (
<div>
<label htmlFor="option-select">Select Option</label>
<Select
value={option}
options={options}
onChange={option => setOption(option)}
/>
{option && <div>{option.label}</div>}
</div>
);
}
export default TestApp;
我什至不确定我应该查询什么。是隐藏的输入吗？
reactjs jestjs react-select react-testing-library react-hooks
我发现了对react-select（多重选择）的yup验证。请在yup中参考链接选择多个react-select验证项。但是我不需要使用yup的多重选择验证。我需要对react-select的基本验证我尝试过，但是我无法使用yup实现反应选择验证。
我如何使用yup实现它。请帮我解决这个问题。
提前致谢。最好的答案将不胜感激。