标签: react-select

我用来react-select显示可搜索的项目下拉列表，用户可以在其中选择多个项目。我的列表很长，用户经常希望多重选择与相同过滤字符串匹配的许多项目，这是一个有点乏味的过程，因为每次选择一个项目时，下拉列表都会消失，您需要重新输入搜索。

例如，下面的沙箱有一个react-select列出了很多苹果和奶酪的沙箱。为了选择所有苹果，人们必须不断输入“Apple”并一次选择一个苹果。

https://codesandbox.io/s/2l99lry5p

来自桌面 UI 背景，我自然希望能够键入搜索查询，然后按Ctrl-A选择所有匹配的搜索结果并将它们添加到我的列表中，或者Ctrl-Click从匹配集中挑选多个项目。但据我所知，在反应选择中不支持任何这样的热键。

API 是否react-select有任何方法可以实现“全选”热键，该热键将选择与当前搜索过滤器匹配的所有内容（或者甚至页面上的显式“全选匹配”按钮也可以）？我看不到任何编程方式来访问与过滤器匹配的对象集。这是我需要分叉才能react-select实现的东西，还是可以通过现有的 API 以某种方式实现？

这是另一个很好的 stackoverflow 帖子的链接，我的最初答案就是基于该帖子。我正在尝试设计我的 ReactSelect 组件，使其看起来像这样：

从上面的屏幕截图来看，这一点并不明显，但选择框的高度（总共 29 像素）比默认的 ReactSelect 小得多，这是我的第一个样式目标（降低高度）。这是我现在尝试降低高度的代码，主要来自我链接到的 stackoverflow 帖子：

const customStyles = {
    control: base => ({
        ...base,
        height: 22,
        minHeight: 22
    })
};

const customControlStyles = base => ({
    ...base,
    height: 22,
    minHeight: 22
});

const selectOptions = [
    { value: 'pct', label: 'FG Percentage' },
    { value: 'attFreq', label: 'FG Frequency' },
    { value: 'made', label: 'Total Makes' },
    { value: 'att', label: 'Total Attempts' }];

const shotdistSelect =
    (<Select
        // arrowRenderer={null}
        maxMenuHeight={30}
        placeholder={'Knickerbockers'} …

我想延迟react-select的选项元素上的onClick事件。

例子：

import React from "react";
import { components } from "react-select";

const Option = props => {
  const { label, data, onClick } = props;

  return (
    <components.Option
      {...props}
      onClick={() => {
        setTimeout(onClick, 100);
      }}>
      <div>Some custom stuff here</div>
    </components.Option>
  );
};

export default Option;

预期行为：

1. 用户单击选项（在下拉列表中）
2. 反应选择 100 毫秒内不应执行任何操作
3. 100 毫秒后，react-select 完成了他的工作

我已经在和组件上尝试过使用 props selectOption、onChange、 和，但它不起作用。onClickSelectcomponents.Options

我正在使用react-selectwithFormik和Yup来验证我的表单，但由于某种原因我的验证不起作用。我的架构如下所示：

const Schema = Yup.object().shape({
age: Yup.object().shape({
    label: Yup.string().required("Required"),
    value: Yup.string().required("Required")
})
});

我的数据如下所示：

export const ageOptions = [
  { value: 0.1, label: "Not born yet" },
  { value: 0.3, label: "Baby - 0 to 3 months" },
  { value: 0.6, label: "Baby - 3 to 6 months" },
  { value: 0.12, label: "Baby - 6 to 12 months" },
  { value: 0.18, label: "Baby - 12 to 18 months" },
  { value: 0.24, …

我很开始reactJS和前端

我为我的下拉菜单添加了 react-select npm，如下所示，在添加 react-select 之前，一切正常。如何在Select中定义名称？

<div className="container">
            <div className="row">
              <div className="col-md-4" />
              <div className="col-md-4">
                <Select
                  options={this.state.allGenres}
                  onChange={this.props.onDataChange}
                  name="genre"
                />
              </div>
              <div className="col-md-4" />
            </div>
          </div>

这是我的数组，

 var Data = response.data;
    const map = Data.map((arrElement, index) => ({
      label: arrElement,
      value: index
    }));

例子：

[
    {
        "label": "Action",
        "value": 0
    },
    {
        "label": "Comedy",
        "value": 1
    },
    {
        "label": "Documentary",
        "value": 2
    }
]

错误信息进来这里，

   dataChange(ev, action) {
    this.setState({
      [ev.target.name]: ev.target.value
    });
  }

使成为（）

 render() {
    return (
      <Movie …

我目前正在使用React-Select创建一个下拉菜单。这是非常简单的代码：

<Select className="dropdown" value={this.state.selectedOption} 
 options={this.state.options} onChange={this.handleQueryDropdown.bind(this)}/>

产生这个：

我的问题：是否可以将“选择... ”更改为不同的消息？我搜索了堆栈和 api，但找不到任何示例。

谢谢！

如何在菜单下拉react-select中删除padding-top？

const customStyles = {

    indicatorSeparator: styles => ({ ...styles, display: "none" }),
    option: (provided, state) => ({
      ...provided,
      fontSize: 16,

        height:"40px",
      paddingLeft: "11px",
      ":firstChild": {
        margin: "10px",
        padding: "10px",
        borderRadius: "10px 10px 10px 10px"

    }),



 <Select
    styles={customStyles}
    defaultValue={[colourOptions[2], colourOptions[3]]}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
  />

在此处输入图像描述 https://codesandbox.io/s/react-codesandboxer-example-90zz6

我是新手，并试图自己学习。我开始使用 react-select 在表单上创建下拉列表，现在我试图传递所选选项的值。我的状态是这样的。

this.state = {
  part_id: "",
  failure: ""
};

然后在我的渲染中

const {
  part_id,
  failure
} = this.state;

我的表单看起来有 2 个字段

<FormGroup>
  <Label for="failure">Failure</Label>
  <Input
    type="text"
    name="failure"
    placeholder="Failure"
    value={failure}
    onChange={this.changeHandler}
    required
    />
  </FormGroup>
  <FormGroup>
  <Label for="part_id">Part</Label>
  <Select
    name="part_id"
    value={part_id}
    onChange={this.changeHandler}
    options={option}
  />
  </FormGroup>

在changeHandler这个样子的

changeHandler = e => {
  this.setState({ [e.target.name]: e.target.value });
};

更改处理程序对输入工作正常，但 Select 抛出错误，说无法读取属性名称。我浏览了 API 文档，并为 Select onChange 想出了这样的东西

onChange={part_id => this.setState({ part_id })}

它将 part_id 设置为标签、值对。有没有办法只获得价值？以及我将如何实现相同的multiselect？

我tooltip想要react-select's 选择。我见过@atlaskit/tooltip完全像这样的工作，但我想使用材料 ui 工具提示，当我尝试时它不起作用。谁能帮我解决一下吗

import React, { Component } from "react";
import Select, { components } from "react-select";
import {primaryColor,primaryColorLight} from "../app-resources/theme-overrides/global"
import Tooltip from '@material-ui/core/Tooltip';

const { Option } = components;

const customOption = props => {
  return (
        <Tooltip title={props.label} arrow>
          <Option {...props} />
        </Tooltip>
  );
};

export default class SingleSelect extends Component {
  render(props) {
    return (
      <>
      <Select
        components={{
          Option: customOption,
          }}
        className="basic-single"
        classNamePrefix="select"
        name={this.props.name}
        isClearable
        options={this.props.Options}
        placeholder={this.props.placeholder}
        styles={{
          menu: …

我找不到删除图像中显示的闪烁文本光标的方法。当选择焦点时它会出现。

这是我选择的代码：

  <Select 
    options={sizeOptions}
    onChange={handleSelect}
    placeholder='Size'
    className='Select-container'
    classNamePrefix='Select'
    value={null}
  />