标签: react-select

如何使反应选择始终显示选项列表默认情况下，当您单击数组按钮或开始输入内容时，它会切换

var Select = require('react-select');

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

function logChange(val) {
  console.log('Selected: ', val);
}

<Select
  name="form-field-name"
  value="one"
  options={options}
  onChange={logChange}
/>

我正在使用react-select在我的中创建一个选择选项create-react-app，并尝试映射对象数组以生成选项。我的应用程序加载正常，但当我单击“选择”时，出现此错误：Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

我通过 props 将数据传递给组件，该组件工作正常，数据的结构如下：

const guests = [\n    {\n        name: 'Kait',\n        plus: true,\n        plusName: 'Kitty'\n    },\n    {\n        name: 'S\xc3\xa9anin',\n        plus: true,\n        plusName: 'Guest'\n    }\n]\n

这是选择组件：

<Select\n   value={selectedOption}\n   onChange={this.handleChange}\n   options={\n      this.props.guests.map((guest, index) => {\n         return {\n            label: guest,\n            value: guest,\n            key: index\n         }\n      })\n …

我需要使用react-select打字稿在所选值之前显示一个图标。

这是我到目前为止所尝试的：

SingleValue: React.SFC<SingleValueProps<OptionType>> = ({ children, ...props }) => (
    <components.SingleValue {...props}>
      <i className={`fal fa-${this.props.icon} has-text-grey-light`} /> {children}
    </components.SingleValue>
  )

主要问题是类型定义期望传递给的子级components.SingleValue必须是字符串。

我有一个模态，它监听模态的外部点击并触发关闭模态的 onclose 方法。现在，我将反应选择添加到模式中，选择其中一个选项后，它使我的模式进入关闭状态。我正在从一篇媒体文章中捕获外部点击。

function useOuterClickNotifier(onOuterClick, innerRef) {
  useEffect(() => {
    if (innerRef.current) {
      document.addEventListener("click", handleClick);
    }
    return () => document.removeEventListener("click", handleClick);

    function handleClick(e) {
      if (innerRef.current && !innerRef.current.contains(e.target)) {
        onOuterClick(e);
      }
    }
  }, [onOuterClick, innerRef]);
}

https://medium.com/@pitipatdop/little-neat-trick-to-capture-click-outside-with-react-hook-ba77c37c7e82

我的index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Select from "react-select";
import Modal from "../Modal";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: …

在react-select https://github.com/jedwatson/react-select中，我们可以以编程方式删除react-select中的选定选项之一吗？

例如，在下面的屏幕截图中，我想以red编程方式取消选择？

非常感谢！

是否可以（默认情况下）为反应选择下拉选项指定一个标签，并在选择其中一个下拉选项后在输入字段中显示另一个标签。

例如，如果我有以下对象：

{label: "David Smith", selectLabel: "Dave",  value: 1}

默认情况下是否可以将其label显示在下拉列表中，并且在我做出选择后selectLabel显示在输入字段中？

我说的“默认”是指是否有某个道具或其他东西可以让我分别指定下拉列表和输入字段的值？

所以基本上我希望得到这样的东西：

选择发生后，我希望“Dave”（而不是“David Smith”）显示在输入字段中：

反应选择

let options = [
  {
    "label": "Group 1",
    "options": [
      {
        "label": "Item1", "value": "1|1"
      },
      {
        "label": "Item2", "value": "1|2"
      },
      {
        "label": "Item3", "value": "1|3"
      }
    ]
  },
  {
    "label": "Group n",
    "options": [
      {
        "label": "Item1", "value": "2|1"
      },
      {
        "label": "Item2", "value": "2|2"
      }
    ]
  }
];

 <Select
       onChange={this.onChange}
       closeMenuOnSelect={false}
       isMulti
       menuIsOpen={true}
       options={options}
  />

onChange仅针对组的子项触发，在文档中我找不到用于设置组标题可点击的属性或可以实现此目的的其他选项，有什么想法吗？

我也尝试为这样的团体增加价值

[
  {
    "label": "Group 1",
    "value": [
      "1|1",
      "1|2",
      "1|3"
    ],
    "options": [
      {
        "label": "item1",
        "value": "1|1" …

我正在使用反应选择，但我无法从下拉列表中删除旋转器/箭头。

我可以删除默认分隔符 | 和下拉指示器使用

<Select
  components={{
    IndicatorSeparator: () => null, DropdownIndicator: () => null
  }}
  {...}
/>

但我怎样才能摆脱这些箭头呢？

我想设置一个组件react-select来处理服务器端数据并进行服务器端过滤，但由于多种原因它不起作用。

您能解释一下并显示工作代码吗？

使用反应选择有一个选择下拉列表，允许异步选项加载和多选。库的默认行为将所选选项呈现在输入本身旁边：

但我想在选项列表中而不是在选择标题中显示选定的选项。我通过传递自定义选项组件实现了这一点。这是工作示例：

https://codesandbox.io/s/trusting-hellman-yidqn

现在我想从标题中删除/隐藏所选选项。另外，当焦点不在输入范围内时，我想显示占位符。