我想react-select用作输入。
当用户键入时，它会自动完成已经存在的选项，但如果不存在，则保留文本值并onChange在我模糊组件或按 时调用enter。
我知道Creatable，但我不需要创建新选项，只需保存用户写入的值。
我正在使用react-select React 组件来显示自动完成输入字段。
在聚焦 react-select 组件输入字段时，它将显示我不想要的所有可用选项，因为数据集的长度以千为单位。我只想在用户输入至少一个字符时显示选项。有没有办法做到这一点？或者这是我应该提出的功能请求吗？
提前致谢。
我正在使用react-select，并且我不想对应该显示的选项进行硬编码，但是选项是我从api获取的数据。我真的找不到任何东西，而且由于没有显示任何内容，所以我尝试执行的操作不起作用。有谁知道？谢谢！！！
api.js：
export function availableCities() {
return axios.get('/cities').then(function (response) {
return response.data;
})
}
零件：
import Select from 'react-select';
import {availableCities} from '../utils/api.js';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedOption: '',
clearable: true,
cities: [],
}
}
componentDidMount() {
availableCities()
.then(res => {
this.setState({
cities: res.Cities.name
})
console.log("hello", this.state.cities)
})
}
handleChange(selectedOption) {
this.setState({selectedOption});
}
render(){
let options = this.state.cities.map(function (city) {
return city.name;
})
return (
<div>
<Select
name="form-field-name"
value={this.state.value}
onChange={this.handleChange}
clearable={this.state.clearable}
searchable={this.state.searchable}
options={options} …我已经愉快地使用 react-select 一段时间了，但是Creatable在组件版本方面遇到了问题。
这是我的代码：
const options = [
{
label: 'One',
value: 'One'
},
{
label: 'Two',
value: 'Two'
},
{
label: 'Three',
value: 'Three'
},
{
label: 'Four',
value: 'Four'
}
];
const selectedItems = [
{
label: 'One',
value: 'One'
}
];
const App = () => (
<div style={styles}>
<Select.Creatable
backspaceRemoves={true}
multi
openOnFocus={false}
openOnClick={false}
onSelectResetsInput={false}
onBlurResetsInput={false}
onCloseResetsInput={false}
arrowRenderer={() => null}
clearRenderer={() => null}
options={options}
value={selectedItems} />
</div>
);
我还在这里创建了一个可运行的版本：https : //codesandbox.io/s/q27lnon96
如您所见，如果您访问 Sandbox 页面，当用户单击离开时，任何输入到选择中的文本都会消失。如果选择再次获得焦点，它会重新出现。 …
我正在尝试更新在别处触发的事件的选项列表。我已经保存了状态中的选项，当我有更新的列表时，我 setState 会触发渲染，但选择框不显示更新的列表
constructor(props) {
super(props);
this.renderSelectField = this.renderSelectField.bind(this);
this.renderTextField = this.renderTextField.bind(this);
this.updateCommsMatrix = this.updateCommsMatrix.bind(this);
this.renderSelect2Field = this.renderSelect2Field.bind(this);
this.clearValue = this.clearValue.bind(this);
this.updateValue = this.updateValue.bind(this);
this.meta = {
title: 'Request Exemption',
description: 'This section allows you to request an exemption'
};
this.runOnce = false;
this.state = {
loaded: false,
searchable: true,
selectValue: 0,
clearable: true,
rtl: false,
options: [
{ value: 0, label: 'All'}
]
};
this.exemptionType = {};
this.markets = {};
this.serviceDomain = {};
this.servicesList = {};
this.matrices = {}; …我有一个返回数据的 API 调用，我可以看到我以正确的方式返回选项，但由于某种原因，我无法让 React Select 显示选项。有什么我想念的吗？
searchGroups(searchString){
if(!searchString) return Promise.resolve({ options: [] });
UserGroups.getUserGroups(searchString).then((res) => {
let groups = [];
groups = res.groups.map((d) => ({
value: d.group_ID,
label: d.group_name
}))
return {options: groups};
}, (e) => {
this.setState({
searchError: e.message
})
})
}
从我可以看到的groups数组是（在搜索时）返回为
[
{value: 1, label: "Admins"}
{value: 22, label: "Asset Group"}
{value: 2, label: "Read-only"}
]
但是，搜索框会因“正在加载...”消息而暂停，而加载微调器会保持不变。我可以看到 API 已返回，但未显示任何选项。
这就是我如何实施Select我缺少的选项吗？我都试过valueKey，labelKey但都不适合我。
<Select.Async
multi={true}
onChange={this.onChange}
loadOptions={this.searchGroups}
value={this.state.value}
/>
我确定这是我返回数据的方式，但不确定这是哪里出了问题以及我需要纠正什么格式。任何帮助将不胜感激。
首先，感谢出色的工作。这让我轻松很多。那么在这里我想捕捉删除事件，我该怎么做？我阅读了文档但找不到删除事件
我尝试应用 react-select 来创建像演示一样的异步选择，并希望为输入添加默认值。
如下，onBlur 时默认值会清零，因为 onBlur 会默认触发 handleInputChange 事件，值为空。
我通过像“onBlurResetsInput”一些默认设置猜测这力量的情况下，但“onBlurResetsInput”道具已经在被删除V2.0.0。所以想知道如何防止 onBlur 重置，谢谢。
import Async from 'react-select/lib/Async';
export class AsyncSelect extends React.PureComponent {
state = {
inputValue: this.props.defaultValue,
}
handleInputChange = (value) => {
this.setState({
inputValue: value,
});
this.props.syncOptions(value);
}
render() {
return (
<Async
inputValue={this.state.inputValue}
onInputChange={this.handleInputChange}
options={this.props.options}
onChange={(option) => this.props.selectOption(option.value)}
/>
);
}
}
我正在使用 TypeScript 开发一个 React 项目。他们将react-select组件包装到另一个组件中。包裹的组件如下：
import * as React from "react";
import Select from "react-select";
import { Props as SelectProps } from "react-select/lib/Select";
export interface SelectValue {
label: string;
value: string;
}
export interface SelectFieldProps<TValue> extends SelectProps<TValue> {
label?: string;
}
type GenericSelectField<TValue> = React.StatelessComponent<
SelectFieldProps<TValue>
>;
const SelectField: GenericSelectField<SelectValue> = ({
label = "",
...rest
}) => (
<div className="react-select-wrapper">
{label ? <span className="input__label">{label}</span> : null}
<Select classNamePrefix="react-select" {...rest} />
</div>
);
export default SelectField;
我想blur …
react-select v2是否有办法一次搜索多个值？就像我可以让用户粘贴在逗号或空格分隔的值列表中，并且与这些结果匹配的项目将显示在下拉列表中。
示例react-select（我们称为项目选择器）：
<StyledFormItemPicker
className="emailPicker"
filterKeys={['label']}
label="email picker"
value={emailPickerValue}
onChange={value => onEmailPickerChange(value)}
items={users}
isMulti={true}
/>
onChange代码：
// allow user to pass in comma separated list to search
export const onEmailPickerChange = props => event => {
event.persist();
// split event (value) on space or comma
// push to an array
// set that array of strings as the value and see all results?
};