标签: react-select

我有反应选择组件，我使其与 redux 形式兼容，如下代码：

const MySelect = props => (
  <div>
    <Select
      {...props}
      value={props.input.value ? props.input.value : 'All'}
      onChange={value => props.input.onChange(value)}
      // onFocus={() => props.input.onFocus(props.input.value)}
      onBlur={() => props.input.onBlur(props.input.value)}
      options={props.options}
      placeholder={props.placeholder}
      selectedValue={props.selectedValue}
    />
    {
      props.meta.touched && props.meta.error &&
      <span className="error">
        { props.intl.formatMessage({ id: props.meta.error }) }
      </span>
    }
  </div>
);

除了一件事之外，它工作正常。需要单击两次才能折叠。为什么会发生这种情况？

如何传递选项以在选择中预览图像。我有国家选择，我想预览国旗。在这种情况下，我不知道如何传递“选项”对象。

    var countries = 
    [
          {value: 'me', label: 'Montenegro'},
          {value:'rs',label: 'Serbia' }
    ];

   <Select name={"nationality_" + passenger.passengerId}
           value={passenger.nationality}
           options={countries}/>   

我正在使用react-select vserion 2 组件。我希望能够在有人按下退格键时触发 OnKeyDown 事件。

有谁知道如何做到这一点？

模块导入对我不起作用。我尝试了堆栈溢出和其他提供的不同解决方案。这些是我遵循反应选择的步骤

npm install --save @types/react-select

像这样导入模块

import Select from "react-select"

但我得到了错误

找不到模块：错误：无法解析“react-select”

import * as React from "react";
import ReactSelect from 'react-select'
export class Select extends extends React.Component<someProps>{

render(){
   return(
  <Select id="color" options={options} />
);
}
}

但我找不到解决这个问题的方法。

所以，我需要将 defaultValue 传递给启用多选的 react-select 组件。我已经尝试了所有我能想到的：字符串数组、对象数组、字符串等......似乎没有任何效果。

我也在使用 getOptionLabel 和 getOptionValue，它们可能是造成所有这些混乱的原因吗？

我正在为Async Select from苦苦挣扎react-select。我设法显示了一些 defaultOptions 并使用 promises 和loadOptionsprop对其选项进行异步获取。

我需要的是在单击时显示选项下拉列表时更新选项（解决承诺）。有没有办法执行相同的承诺onClick（即使在onChange）？

我正在使用react-select团队提供的以下代码笔https://codesandbox.io/s/7w4w9yyrmx?module=/example.js

感谢您的帮助！

我正在尝试从反应选择更改滚动条的样式并自定义它。有人知道怎么做吗？

这是我想要设置样式的 css 代码

  /* Scroll Bar */
::-webkit-scrollbar {
  width: 4px;
  height: 0px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

我有一个使用react-select的组件，我从 props 中获取选项，在 selct 选项上我想用其他选项重新渲染选择 - 它有效，但 onChange 未触发。

import Select from 'react-select';

onChange(option){ 
   dispatch(updateOptions());
}

render(){
  return 
    <Select
      options={this.props.options}
      onChange={this.onChange}
      value={this.state.text}
      menuIsOpen
    />
} 

我认为改变颜色的最好方法是使用主题道具或在文档中看起来像这样：

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

export default () => (
  <Select
    defaultValue={flavourOptions[2]}
    label="Single select"
    options={flavourOptions}
    theme={theme => ({
      ...theme,
      borderRadius: 0,
      colors: {
        ...theme.colors,
        primary25: 'hotpink',
        primary: 'black',
      },
    })}
  />
);

但是，我并没有被困在弄清楚如何“连接”它的黑暗模式切换上。

这个问题没有很好的答案，所以我来回答一下：

问题是，如果您想使用 React-Select 并且您想要持久的输入值，该值在选择或模糊时不会被清除。目前组件内不支持此功能，因此需要解决方法。

我还就该主题提出的几个问题之一回答了这个问题 https://github.com/JedWatson/react-select/issues/588
https://github.com/JedWatson/react-select/issues/3210