标签: react-select

我试图在点击反应选择选定的值元素时显示一个弹出窗口，如下所示：

当我点击酥料饼触发我的问题发生，下拉打开，酥料饼太...我只是想开酥料饼的，我试过了e.nativeElement.stopPropagation，e.stopPropagation，e.preventDefault等没有成功。这是一个沙箱 如果您想知道我是如何做到这一点以及如何重现该问题的。

https://codesandbox.io/s/pjv7vmlv3j

谢谢你的帮助

我正在尝试onPaste使用 react-select。似乎无法利用该事件。

基本上我只是在<Select/>：onPaste={(e) => this.doPasteMagic(e)}

但它永远不会被解雇。我是不是遗漏了什么，还是有另一种方法来区分打字和粘贴？

我已经看到了一些关于使用 的建议onChange，但这对我来说也很脏。

React-select 默认行为是在输入值为空时弹出菜单。我想修改此行为，以便当输入为空时，无论是在用户输入任何内容之前还是用户退格进入空状态之前，菜单都将关闭。

我找不到任何支持这种行为的道具，所以我想通过调用一些关闭onInputChange. 就像是：

onInputChange={(inputValue) => {
      this.setState({
        inputValue,
      });
      this.selectRef.closeMenu();
    }}

我尝试blur()在Selectref上使用，但它只是在不关闭菜单的情况下模糊了输入，绝对不是我正在寻找的行为。

是否有暴露的道具或功能可以满足我的需求？

我正在尝试改善我的UI的反应选择。我在网上进行了一些研究，但仍然无法弄清楚如何删除选择栏中的条形图。

我可以设置控件组件的样式以删除栏吗？怎么样？

import React from 'react';
import chroma from 'chroma-js';

import { colourOptions } from './docs/data';
import Select from 'react-select';

const dot = (color = '#ccc') => ({
  alignItems: 'center',
  display: 'flex',

  ':before': {
    backgroundColor: color,
    borderRadius: 10,
    content: ' ',
    display: 'block',
    marginRight: 8,
    height: 10,
    width: 10,
  },
});

const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles, …

我想知道是否可以让所有选定的选项都出现在列表的顶部，然后按字母顺序对所有选定的选项进行排序？或者至少让它们出现在顶部。先感谢您。

我是新手react。我react select用于选择。现在，我有以下内容jsx

div className="col-md-4 d-flex align-items-center" style={borderClass}>
                <label className="mb-0 font-weight-bold" style={labelFont}>
                  Technology
                                </label>
                <Select
                  styles={styles}
                  options={this.props.technology}
                  placeholder="None Selected"
                />
              </div>


const mapStateToProps = (state) => {
  return {
    technology : state.CreateJob.technology,
    userCompany: state.CreateJob.userCompany
  }
}

这是来自减速器作为道具。现在，我得到的数据就像，

['a', 'b', 'c']

那么，我如何在渲染中使用它作为一个选项。谁能帮我这个 ？谢谢。

我正在使用反应选择。我不想从选项列表中删除选定的项目。看起来它会在您添加 isMulti 时自动从选项列表中删除选定的选项，因为当我没有 isMulti 时，它不会删除选定的选项。我已经看到我可以使用一个名为 filterOption 的道具，但我不明白如何使它工作。谁能告诉我如何使用 filterOption 来显示所有选项，即使选择了某些选项？如果 Select 会自动删除选定的选项，那么即使选择了某些选项，是否有人对我如何显示所有选项有任何建议？

  import Select from 'react-select';

  ...

  <Select
    value={this.value()}
    isDisabled={this.props.disabled}
    closeMenuOnSelect={false}
    components={Animated}
    isMulti
    isClearable
    onChange={this.props.onChange}
    onBlur={this.onBlur}
    options={this.props.options}
  />

顺便说一句：我可以看到演示中有一个选项可以取消选中“删除选定的选项”，但我无法找到源代码，它返回 404。这是我正在查看的演示的链接，标题为“多选”：https : //jedwatson.github.io/react-select/

我正在使用react-select和TextField Material-UI。是否有可能设置helperText（组件下方的小文本），react-select就像它是在其中制造的一样TextField？

提前感谢您的帮助。

PS 我不认为我的问题是这个问题的重复。另一篇文章是关于如何自定义作为 react-select 一部分的组件，我想添加一个 react-select 没有的选项。

我使用 Material-UI lib 文档中的示例自动完成字段。( https://material-ui.com/demos/autocomplete/#react-select )

在页面底部或浏览器的视口打开菜单时，翻转菜单会出现问题。

有没有办法用 Material-UI 和 react-select 解决这个问题？还是我需要写一些自定义的东西？

1 [我试图将分页的z-index更改为0，这是行不通的]

这是指向我的代码框的链接：请检查最后选择的下拉列表，它位于分页后面。

https://codesandbox.io/s/jolly-chandrasekhar-uim6k