标签: react-select

我正在研究react-select图书馆并面临一些问题,我正在使用redux-form库并<Field />从中导入组件.这样我就可以通过表单将值提交给服务了.

我的问题:

当我使用react-select的默认值时,下面提到的代码工作正常.我可以从下拉列表中选择值,即使在聚焦时也会选择该值,该值将保留.但选择的值不是通过表单提交,因为<Select>这就是我包装组件和使用的原因redux-form

import React from 'react';
import Select from 'react-select';
import RenderSelectInput from './RenderSelectInput'; // my customize select box

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


class SelectEx extends React.Component {
    constructor() {
        super();
        this.state = { selectValue: 'sample' }
        this.updateValue = this.updateValue.bind(this);
    }

    updateValue(newValue) {
        this.setState({ selectValue: newValue })
    }

    render() {

        return (
            <div>
                <Select name="select1" id="selectBox" value={this.state.selectValue} options={options} …

我无法正确输入 onchange 函数。我创建了一个处理函数，但打字稿一直抱怨类型不匹配。

我的功能：

private handleChange(options: Array<{label: string, value: number}>) {
}

打字稿错误：

src/questionnaire-elements/AssessmentFactorSearch.tsx (43,9): Type '{ ref: "select"; name: string; backspaceToRemoveMessage: ""; value: { label: string; value: IAsse...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Async<OptionValues>> & Readonly<{ children?: React...'. Type '{ ref: "select"; name: string; backspaceToRemoveMessage: ""; value: { label: string; value: IAsse...' is not assignable to type 'Readonly<ReactAsyncSelectProps<OptionValues>>'. Types of property 'onChange' are incompatible. Type '(options: { label: string; value: number; }[]) => void' is not assignable …

我有一个自定义模式，里面有 2 个 react-select 组件。如果内容超过其大小，模态主体已准备好自动滚动，但 react-select 组件下拉列表会在模态内打开并带有此溢出，这正是我不想要的。没有溢出，它工作正常。

我正在使用 CSS 模块。

<div className={styles.modalBody}>
    {this.props.children}
</div>

.modalBody {
    padding: padding;
    flex: 1 1 auto;
    height: 45vh;
    max-height: 100%;
    overflow: auto;
}

<Select
    id={this.props.id}
    className={styles[this.props.selectType ? this.props.selectType : 'selectWhite']}
    classNamePrefix="select"
    name={this.props.name}
    value={selectedOption ? selectedOption : this.props.value}
    placeholder={this.props.placeholder}
    onChange={this.onChange}
    options={this.props.options}
    isDisabled={this.props.disabled}
    isSearchable={false}/>

我怎样才能解决这个问题？谢谢！:)

使用 react-select v2，我想在用户点击某个键时显示并关注 Select 元素。以下是我尝试过的一些事情或我走下的道路。

当我为 Select 元素设置 ref 并尝试调用.focus它时，它说找不到焦点函数。也许我应该以某种方式获取它的子元素，然后将注意力集中在它上面？

似乎没有任何我可以传递的道具会触发焦点功能。有一个openOnFocus但不是一个focusOnOpen。我唯一能想到的就是启用自动对焦，然后以某种方式触发重新安装，但似乎没有一种简单的方法可以做到这一点，而且感觉很糟糕。或者，我可以启用每次按下键时只创建 Select 组件而不是显示它，然后卸载它而不是隐藏它。

我怎样才能在我想要的时候正确地让 react-select 元素获得焦点？

我在我的组件周围使用了一个包装组件。这是我的包装器的渲染方法：

  render() {
    return (
      <Select
        options={this.props.options}
        value={this.state.value}
        ref={this.selectRef}
      />
    );
  }

这就是我调用包装器的地方：

        <Wrapper
          options={this.props.labelOptions}
          ref={this.wrapperRef}
        />

然后我尝试使用其中之一this.dropdownNode.focus()或this.dropdownNode.current.focus()两者调用 focus并且都说没有找到 focus 方法。

尝试向 react-select 中的选项添加图标。我从文件england.svg, 中导入了 svg 图标germany.svg。我创建customSingleValue并放入

<Select components={{ SingleValue: customSingleValue }} />

显示标签，但不显示图标。

演示在这里：https : //stackblitz.com/edit/react-q19sor

import Select from 'react-select'
import { ReactComponent as IconFlagEngland } from "./england.svg";
import { ReactComponent as IconFlagGermany } from "./germany.svg";

const options = [
  { value: 'England', label: 'England', icon: <IconFlagEngland/> },
  { value: 'Germany', label: 'Germany', icon: <IconFlagGermany/> }
]

const customSingleValue = ({ options }) => (
    <div className="input-select">
        <div className="input-select__single-value">
            { options.icon && <span …

我无法弄清楚如何在我的选择集中时删除边框或轮廓（不确定是哪一个）。

上传图片供参考。默认情况下，我没有边框。

customStyle = {      
        control: provided => ({
            ...provided,           
            height: 10,
            width: 300,
            padding: 10,
            margin: 0,
            marginLeft: 0,
            border: "0px solid black",
            fontSize: 13,
            backgroundColor: 'white',
            outline: 'none'            
        })
    }  

谢谢

我在我的项目中使用react-select。

我有很多选择，并且需要打开这些选择，因此我使用道具 menuIsOpen={true} 但由于某种原因，该道具导致页面向下滚动到几乎页面中间。

当我设置 menuIsOpen={false} 时，页面不会向下滚动，但它不能解决问题，因为我必须打开选择

有人熟悉这个问题吗？

      <Select
        styles={filter.name !== "More" ? basicStyles : moreStyles}
        isMulti={filter.name !== "colorType" ? true : false}
        options={options}
        hideSelectedOptions={false}
        closeMenuOnSelect={false}
        placeholder=""
        value={selectedValues ? selectedValues : []}
        isClearable={false}
        isSearchable={false}
        onChange={addSelectFilter}
        components={{ MultiValueLabel: customMultiValueLabel }}
        blurInputOnSelect={false}
        classNamePrefix={filter.name === "More" ? "more" : "basic-drop"}
        className={filter.name === "More" ? "more-select-container" : undefined}
        menuIsOpen={
          filter.name === "More" ? undefined : menuIsOpen ? true : undefined
        }
      />

我使用反应选择创建了一个选择组件。我需要将徽章附加到可用值为 false 的选项。我已经使用-实现了它

  const formatOptionLabel = ({ code, name, available }) => (
      <div className="ds-select-distibutor-step-container format-option" style={{ display: "flex", cursor:"none" }}>
        <div>{name}</div>
        {!available ?
        <div className="format-label" style={{ borderRadius: "12px" ,marginLeft: "auto", color: "#fff" , backgroundColor: "#aaa", padding: "2px 10px", fontSize:"12px"}}>
        <span>Coming Soon</span>
        </div>
        : ''}
      </div>
     );

以下 json 在运行时出现，我将其映射并用作选项 -

const options= [
    {code:"abc",name:"abc",rank:0,available:true},
    {code:"xyz",name:"xyz",rank:0,available:false},
    {code:"pqr",name:"pqr",rank:0,available:true}]

以下是我的自定义选择组件

     <Field 
              id="selectedDistributor"
              name="selectedDistributor" 
              component={customSelect} 
              options={sortBy(options, 'name').map(({ code, name, available}) => ({ code, name, available }))}
              formatOptionLabel={formatOptionLabel}
              className="select-step"
              placeholder="abc"
              touched={false}
              defaultValue="abc"
              requiredField
              > …

我为我的应用程序 React 创建了一个 React 选择组件，并且有超过 70 个选项，为此我想定义用户可以选择的选项的最大限制以很好地处理它。你能帮我么？

代码：

export default function ReactSelect(props) {\n  const animatedComponents = makeAnimated();\n  return (\n    <Select\n      isMulti="true" // allow to select mutli options\n      isRtl="true" // right to left\n      name="name" // html name\n      options={accountsNames} // options\n      className="basic-multi-select"\n      classNamePrefix="select"\n      isSearchable="true" // searchable for the closest one\n      placeholder="\xd8\xa7\xd8\xae\xd8\xaa\xd8\xb1 \xd8\xa7\xd8\xb3\xd9\x85 \xd8\xa7\xd9\x84\xd8\xad\xd8\xb3\xd8\xa7\xd8\xa8..." // if there is no option selected\n      components={animatedComponents}\n    />\n  );\n}\n

我刚刚更新了反应选择库，我发现它不再起作用了。在官方网站上，我发现了这个升级指南，它对我没有帮助，而且什么也没说。

我还检查了他们网站上的示例，但它给了我同样的错误。

例如我想做一个非常基本的可创建选择：

import AsyncCreatableSelect from 'react-select/async-creatable';

const promiseOptions = (inputValue: string) =>
  new Promise<any[]>((resolve) => {
    setTimeout(() => {
      console.log('searching...');
    }, 1000);
  });

const Select: React.FC = () => {
  return (
    <AsyncCreatableSelect
      cacheOptions
      defaultOptions
      loadOptions={promiseOptions}
    />
  );
};

对于我的项目中的所有其他选择也是如此。您知道如何修复它吗？

我收到的错误如下：

我使用nextjs 12.1.2 react 18.0.0和typescript 4.6.3react-select 5.2.2