标签: react-select

我希望在v1.0.0-beta10中使用React-Select，以便将选定的项目保留在菜单中，以便能够实现类似于MaterializeCss中的多选的下拉菜单

这是屏幕截图：

如何实现这种行为？

我有一个组件，当你点击它的任何地方时它会执行一个动作，除非你点击某些有自己onClick处理程序的子组件。这些onClick处理程序能够通过调用e.stopPropagation. 我如何类似地捕获和stopPropagation()在ReactSelect组件的onClick事件上？普通onClick处理程序永远不会被调用。

这基本上是所描述的设置（ES6）：

handleMost = e => { 
  // Note that I cannot check e.target here, because there is a bunch
  // of other stuff that might be the target that still should cause
  // the standard action to occur 
  doStandardThing();
}

handleFoo = e => { e.stopPropagation(); doSomethingFoo(); }}
handleBar = e => { e.stopPropagation(); doSomethingBar(); }}
handleBaz = e => { e.stopPropagation(); doSomethingBaz(); }} …

我正在使用react-select在我的 React 应用程序中定义一个选择输入控件。这就是我使用组件的方式：

<Select
   onChange={function(e) {console.log(e)}}
   options={[
      {value: "sf", label: "San Francisco"},
      {value: "nyc", label: "New York City"}
   ]}
></Select>

在选择任何选项之前，我看到一个Select...占位符作为输入值。选择选项后，这不会改变：输入值不会改变，Select...占位符似乎是选定的“选项”。

我使用组件的方式有问题吗？

感谢您打开这个问题。我实现了react-select。

            <Select
              searchable
              clearable
              name="form-field-name"
              options={options}
              value={this.state.value}
              onChange={this.onChange}
            /> 

将页面更改为 时RTL，我padding-right在所选选项的开头有一些空格 ( )。随附的屏幕截图阐明了这一点。我试着添加

.has-value.is-clearable.Select--single > .Select-control .Select-value { padding-right: 10px; }

到我自己的 CSS 但这没有奏效。请帮我修复它。

另一个问题，清除文本的“x”我找不到删除它的方法，问题是它既不能清除文本也不能删除。我在有/没有searchable财产的情况下使用了两种方式。此外，由于返回了空值，因此单击时会生成错误（我使用控制台发现了这一点）。请看下面的截图。

我可能只是忽略了一些东西，但我无法弄清楚为什么我似乎无法使用 react-select 配置多选。

这是我所看到的一个工作示例。

请注意，在多选中只能选择一个项目，然后在清除当前项目之前不再加载下拉列表。此外，当该项目被清除时，您可以看到所有选项，看起来鼠标悬停的突出显示不再有效。

代码：

import React from "react";
import { render } from "react-dom";
import Select from "react-select";
import "react-select/dist/react-select.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      multiValue: null,
      filterOptions: [
        { name: "foo", label: "Foo" },
        { name: "bar", label: "Bar" },
        { name: "bat", label: "Bat" }
      ]
    };

    this.handleMultiChange = this.handleMultiChange.bind(this);
  }

  handleMultiChange(option) {
    this.setState(state => {
      return {
        multiValue: option
      };
    });
    console.log(option);
  }

  render() {
    return ( …

我最近开始使用 react-select。( https://github.com/JedWatson/react-select )

如果选择输入为空并且 1. 我专注于选择输入 OR, 2. 我单击位于选择输入右侧的反向箭头，我将看到我提供的结果列表中的所有选项默认情况下选择组件。

除了上面提到的行为，当我在输入中输入内容时，我应该只能看到匹配的文本结果。我怎样才能做到这一点？

使用className属性时遇到问题。对我而言，只有父div可以上课，而子div却不可以。结果，它们最终具有白色而不是替代颜色的背景色。

<Select
    className="games-dropdown-2"
    defaultValue={colourOptions[0]}
    name="color"
    options={colourOptions}
/>

下面是css类

.games-dropdown-2 {
  background-color: #023950;
  color: #FFFFFF;
  padding-left: 15px;
  width: 93%;
}

另一个问题是，子div似乎是从奇怪的祖父母div继承了边框CSS。

附加图像以提出想法。 反应选择类名问题

我需要对“ react-select”（github repo）进行简单的“必需”验证。在最新版本中，它使用css-in-js方法。所以我有自定义样式：

export const customStyles = {


 control: (base, state) => ({
        ...base,
    }),

    menu: (base, state) => ({
        ...base,
    }),

    menuList: (base, state) => ({
        ...base,
    }),
}

我如何更改，例如，borderColor如果字段无效？

我有一个 Async react-select (v2)，它loadOptions根据选项卡的变化来改变它。问题是，当切换选项卡时，选择仍然显示缓存的先前 api 调用的结果。每次选项卡更改时都需要清除缓存。

 <Async
    cacheOptions
    isClearable
    loadOptions={props.loadOptions}
    {...this.selectProps(inputText, props)}
  />

我在几个地方看到 React-Select v2 将包含重置异步选择缓存的选项，但我在文档中找不到有关如何执行此操作的示例。

请指教。

例如：https : //codesandbox.io/s/jz33xx66q9?module=/example.js

我想在菜单打开时旋转表情符号以放大尺寸

怎么做