使用 React-Select Creatable 时，我可以仅隐藏下拉列表中的“创建新选项”吗？我想像往常一样显示其他建议，并希望保留创建新标签的可创建功能。只是不想显示用户在下拉菜单中输入的内容。

编辑：添加 React-Select 的示例代码：

import React, { Component } from 'react';

import CreatableSelect from 'react-select/lib/Creatable';
const colourOptions = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]


export default class CreatableMulti extends Component<*, State> {
  handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  formatCreate = (inputValue) => {
    return (<p> Add: {inputValue}</p>); 
  };

  render() {
    return (
      <CreatableSelect
        isMulti …

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

const Option = props => { 
  //const temp = "some";
  //
  return ( 
  <div> 
    <components.Option {...props}> 
      <input type="checkbox" checked={props.isSelected} onChange={() => null} /> 
      <label>{props.value}</label> 
    </components.Option>
  </div> 
  ); 
};

目前我的代码如下所示，它的作用是，它显示类似此 ScreenShot 的内容

我不想在搜索输入栏中显示所选值。有什么方法可以禁用所选选项在输入栏中显示吗？

选择栏代码

<Select components={{ Option }} isMulti closeMenuOnSelect={false} hideSelectedOptions={false} options={options} />

我正在使用反应选择，只是注意到当我在输入字段中已经有值时（通过用户类型或通过选择菜单列表中的选项），然后我模糊输入然后再次聚焦它 - 尝试编辑我的最后一个输入 - 它只是从头开始，而不是从输入的最后一个字符继续。我刚刚在作者的github上发现了这个问题。它是两年前提出的，目前仍然是一个悬而未决的问题。真的没有解决方法可以实现这一目标吗？

在我的应用程序中，我正在使用react-select组件来选择城市功能。组件渲染土耳其城市。因此，一些城市名称以土耳其语字符“\xc4\xb0-i”开头。一切正常。但问题是，当我输入小写“i”时，我无法获得以“\xc4\xb0”开头的城市名称，例如\xc4\xb0zmir、\xc4\xb0stanbul。

这是我的组件

import Select from \'react-select\';\nimport {\n  FormGroup,\n  Input,\n  Label,\n  Col,\n} from \'reactstrap\';\n\n<FormGroup row>\n  <Col xs="12" md="9">\n    <Label htmlFor="text-input">{t(\'RESTAURANT_DETAILS.GENERAL_INFO.CITY\')}</Label>\n    <Select\n      placeholder={i18n.t(\'CHOOSE_CITY\')}\n      isDisabled={!this.state.editable || accountingLoading}\n      options={this.state.cities.map(city => ({\n        value: city.code,\n        label: city.city,\n      }))}\n      value={this.state.city}\n      onChange={val => this.onCitySelected(val)}\n    />\n  </Col>\n</FormGroup>\n

因此，要获取这些城市，我应该输入完全大写的“\xc4\xb0”。有什么办法可以解决这个问题吗？我被这个烦人的错误困住了。

以下是案例截图。

https://cdn1.imggmi.com/uploads/2019/9/1/fa7b5ca6e264501abb395b4ac38c753d-full.png

https://cdn1.imggmi.com/uploads/2019/9/1/4c6f5c8e1c891a3d2ae8ee38dbfadb79-full.png

https://cdn1.imggmi.com/uploads/2019/9/1/0c3ae965754e60a015ea048ddd081f51-full.png

https://cdn1.imggmi.com/uploads/2019/9/1/7ee3c8187ea4830386ff45cbd40ee126-full.png

--- 更新 --- \n我解决了，伙计们。

我将其添加为下面的答案。

我在代码中使用反应选择：

import React, {Component} from 'react';
import Select, {createFilter} from 'react-select';

let _ = require('underscore')

class Test extends Component {

  constructor(props) {
    super(props);
    this.state = {
      variables_api: [],
      selected_question_obj: null
    };
    this.handleChange_question = this.handleChange_question.bind(this)
  }

  componentDidMount() {
    fetch('http://127.0.0.1:5000/variables')
    .then(res => {
      return res.json()})
    .then(data => {
      this.setState({
        variables_api: data
      });
    })
  }

  handleChange_question(evt) {
    this.setState({
      selected_question_obj: evt
    });
  }

  render () {
    var key_api = this.state.variables_api.map(obj => {
      return {
        key_api: obj['index'],
        question_api: obj['Label Variabile'],
      };
    })
    var key = …

我有两个异步表单字段。根据第一个字段的选择，第二个字段通过 loadOptions 函数获取数据。我观察到，随着第一个字段中的输入更改，第二个字段的 loadOptions 不会重新执行。如何解决这个问题？

反应选择

import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { useApolloClient} from 'react-apollo';
import { Formik, Form, ErrorMessage } from 'formik';
import * as Yup from "yup";
import AsyncSelect from 'react-select/async'
import AsyncPaginate from 'react-select-async-paginate'
import { GET_ITEM_CODES, GET_ITEMCODE_SPECIFICATIONS } from '../../library/Query';

export default function SampleForm({initialData}){
const history = useHistory();

const [productFilter, setProductFilter] = useState('');

const client = useApolloClient();

const defaultAdditional = {
    cursor : null
}
const …

我正在替换select应用程序中的一些输入以使用react-select. 在使用之前react-select，我在提交时使用该功能清除了表单中的选定选项.reset()，但现在似乎没有产生任何影响。

onSubmit我尝试在函数中存储一个变量，并将null其设置为defaultValueprop 的值，认为Controller它会重置事物。但这没有用。处理这个问题的干净方法是什么？

父表单组件：

function AddActivityForm(props) {

  const { register, handleSubmit, control, watch, errors } = useForm();

  const onSubmit = (data) => {
    //Additional logic here
    document.getElementById("activity-entry-form").reset();
  };

  return (
    <Form id="activity-entry-form" onSubmit={handleSubmit(onSubmit)}>
          <ActivityPredecessorInput
            activities={props.activities}
            formCont={control}
          />
      <Button variant="primary" type="submit" className="mb-2">
        Submit
      </Button>
    </Form>
  );
}

export default AddActivityForm;

儿童使用Select来自react-select：

function ActivityPredecessorInput(props) {
  const activities = props.activities;
  const options = …

我正在将 React-Select Select 组件作为 Material-UI InputBase 组件中的 InputComponent 传递。我已经成功地能够填充选项中的值，但是，我无法使用isClearable.

当 isClearable 被触发时，null 被传递给函数handleChange(event)，我希望有一种方法可以强制对象通过以防止 null 产生错误。

InputBase 中的handleChange 函数具有var element = event.target || inputRef.current. 由于 event 为 null，因此它甚至无法访问包含所需对象的 inputRef。

让它作为不受控制的组件工作会很好。

我创建了一个代码框来说明问题：https ://codesandbox.io/s/morning-feather-l7xqf

我正在尝试在我的表单中实现反应选择，但选项没有显示。如果我检查选择组件，则选项道具已填充，但选项未显示。

我尝试过字符串数组和对象数组。尽管两者都显示在选项属性中，但两者都没有在下拉列表中显示信息。

const systems = [
"SystemName/12345/1",
"SytemName1/7890/2",
"SystemName2/65432/3"
]

我也尝试过：

const systems = 
[{systemName: 'SystemName1", altId:12345, systemId: 1},
{systemName: 'SystemName2", altId:7890, systemId: 2},
{systemName: 'SystemName3", altId:65432, systemId: 3}]

 <form className="page-form" onSubmit={handleSubmit(this.onSubmit)}>
                    <Row>
                        <Col>
                            <Label label="Water System" htmlFor="systemId" required />
                            <Select
                                options={systems}
                                isSearchable={true}
                                name="systemId"
                                value="systemId"
                                placeholder="Select System"
                            />
....
</form>

文档中没有太多关于如何在react select中使用setValue函数的内容。

这是我的问题。在我的多选中，我有一些元素，如果选择这些元素，其他元素就会无效。或者，当选择了 2 个特定元素时，必须选择第三个元素。

所以我做了一个如果。我有一个参考，所以它看起来像这样：

if(selectInputRef.current){
    if(selectInputRef.current.select.hasValue('optionA')){
        selectInputRef.current.select.clearValue();
        //selectInputRef.current.select.setValue('optionB','deselect-option');
    }
    if(selectInputRef.current.select.hasValue('optionA') && selectInputRef.current.select.hasValue('optionC')){
        //selectInputRef.current.select.setValue('optionD','select-option');
    }
}

因此，这项工作中的所有元素均未注释。我可以检查该值是否被选择，如果是，我可以完全清除选择。

但现在我特别需要改变一些元素。但这是行不通的。该文档对此并没有多大用处。

那么我应该如何编写它才能使这条线工作呢？