标签: react-select

我有一个使用react-select的问题.我使用redux形式,我已经使我的react-select组件与redux形式兼容.这是代码:

const MySelect = props => (
    <Select
        {...props}
        value={props.input.value}
        onChange={value => props.input.onChange(value)}
        onBlur={() => props.input.onBlur(props.input.value)}
        options={props.options}
        placeholder={props.placeholder}
        selectedValue={props.selectedValue}
      />
    );

在这里我如何渲染它:

<div className="select-box__container">
                  <Field
                    id="side"
                    name="side"
                    component={SelectInput}
                    options={sideOptions}
                    clearable={false}
                    placeholder="Select Side"
                    selectedValue={label: 'Any', value: 'Any'}
                  />
                </div>

但问题是,我的下拉列表没有我想要的默认值.我做错了什么？有任何想法吗？

我正在使用AsyncSelect并且我想隐藏右侧的向下箭头按钮，该按钮显示选项列表。

有默认选项时才有意义。但就我而言，我没有，所以那个按钮在我的情况下没有意义。

在async模式下并且没有默认选项时，有没有办法删除/隐藏它？

下面是代码

<AsyncSelect
  placeholder="Search ..."
  cacheOptions
  defaultOptions={false}
  value={this.state.currentValue} // Default to null
  loadOptions={this.fetchOptions}
  onChange={...}
  isClearable
/>

此外，是否可以禁用组件在获得焦点时显示空列表的事实，并且仅在输入至少一个字符时才显示匹配的选项。

抱歉问二合一。

提前致谢。

ReactSelect V2(测试版5)似乎有几个道具一样clearValue,resetValue和setValue.无论我在尝试什么,我都无法以编程方式清除选择.resetValue似乎无法从外部访问.

selectRef.setValue([], 'clear')
// or
selectRef.clearValue()

这并不能清除当前的选择.

我在这里想念一下,还是没有完全实现？

我正在尝试Select与react-formstailwind css 和 tailwind 表单插件 ( @tailwindcss/forms) 集成。

仅使用顺风和反应选择，表单就可以正确呈现。但是，使用该插件后，会出现轮廓。我希望 tailwindcss 表单不干扰react-select样式。是否有有效的解决方案允许react-select样式覆盖 tailwind 插件？

此外，请告诉我是否有任何有效的解决方案可以在不求助于其他库（例如或 ）的情况下react-select使用样式化表单。tailwindemotionstyled-components

为react-select组件(https://github.com/JedWatson/react-select)选项设置样式的最佳方法是什么？

我可以很好地定位选择本身,例如:

...
import Select from 'react-select'
...
const styles = {
  fontSize: 14,
  color: 'blue',
}
<Select
    options={[1,2,3,4]}
    placeholder={'Select something'}
    clearable={false}
    style={styles.select}
/>

问题是,展开选择时的实际选项仍然是默认样式.如何定位这些样式选项？

这是我正在谈论的一个例子.我可以设置占位符的样式,但不能选择:

我正在使用 react-select 组件和 bootstrap v4

所有引导程序的东西似乎都是基于 35px 的高度，react-select组件的默认高度是 38px，这看起来有点奇怪。

任何想法如何更改组件的高度？

它使用了一些我以前从未遇到过的奇怪的 JS 样式库。我已经设法让它模仿使用它的焦点轮廓，但高度让我望而却步，任何帮助都非常感谢

你可以在这里玩

我想在我的react-select列表中包含optgroup，但是似乎没有任何地方记录它。我具有以下结构，我从https://github.com/JedWatson/react-select/issues/59中的注释中提取了以下结构：

render() {
  const options = [
    {
      label: "Group 1",
      children: [
        { label: "Group 1, option 1", value: "value_1" },
        { label: "Group 1, option 2", value: "value_2" }
      ]
    },
    { label: "A root option", value: "value_3" },
    { label: "Another root option", value: "value_4" }
  ];
  return <Select options={options} />
}

我希望“组1”是一个optgroup，将选项1和2作为子项。而是，“组1”仅作为常规选项出现。有谁知道“ Group 1”中将其变成optgroup的正确密钥是什么？

我已经尝试过“儿童”和“价值观”，但没有任何效果。

我有一个带有 ReactJs 和 NextJs 的 Web 应用程序。在一个功能组件中，我使用了react-select，然后我收到了以下控制台警告：

警告：道具id不匹配。服务器：“react-select-7-input”客户端：“react-select-2-input”

我的代码如下：

import { Row, Col, Card, Form, Button } from 'react-bootstrap';
import Select from 'react-select';

const priorityOptions = [
  { value: 'p1', label: 'Top level - P1' },
  { value: 'p2', label: 'Mid level - P2' },
  { value: 'p3', label: 'Low level - P3' }
];
const PostView = () => {
  return (
    <div className="DashboardSla-ContentBody__Form">
      <Row>
        <Col md="10">
          <Card className="shadow-sm">
            <Card.Body>
              <Form>
                <h5 className="text-secondary mb-3">Booking details</h5> …

是否可以将 endAdornment 放入 MaterialUI 中的选择菜单中？

我想将内容添加到选择菜单上向下指针的右侧。

endAdornment={
   <InputAdornment position="end">
        <Insights />
   </InputAdornment>

<Select
   labelId="demo-mutiple-name-label"
   id="demo-mutiple-name"
   multiple
   value={fieldName}
   onChange={handleChange}
   input={<Input id="select-multiple-chip" />}
   renderValue={(selected) => (
     <div className={classes.chips}>
     {selected.map((value) => (
        <Chip key={value} label={value} className={classes.chip} />
        ))}
     </div>
     )}
     MenuProps={MenuProps}
   >
   {field.map((field) => (
    <MenuItem key={field} value={field} >
        {field}
    </MenuItem>
   ))}
                            
</Select>

https://github.com/JedWatson/react-select

我想使用React-Select react组件,但我需要添加测试.

我已经尝试了谷歌发现的几个选项,但似乎没有任何效果.我有下面的代码,但它不会导致更改事件.我已经能够添加一个焦点事件,它增加了'is-focusedsed'类,但'is-open'类仍然缺失.

我用过:https://github.com/JedWatson/react-select/blob/master/test/Select-test.js作为参考

我曾尝试仅在输入字段上使用更改事件,但这也没有帮助.我注意到有一个onInputChange={this.change}选择.

测试

import Home from '../../src/components/home';
import { mount } from 'enzyme'

describe('Home', () => {

it("renders home", () => {

    const component = mount(<Home/>);

    // default class on .Select div
    // "Select foobar Select--single is-searchable"

    const select = component.find('.Select');

    // After focus event
    // "Select foobar Select--single is-searchable is-focussed"
    // missing is-open
    TestUtils.Simulate.focus(select.find('input'));

    //this is not working
    TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 40, key: 'ArrowDown' });
    TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 13, …