标签: react-select

我在我的一种形式中使用 ReactSelect：

<Select name='event-title' className="event-title" ref="stateSelect" autofocus optionsComponent={DropdownOptions} onInputChange={this.handleChangeTitle} options={this.state.titleResults} simpleValue clearable={this.state.clearable} name="selected-state"  value={this.state.selectedTitleValue} onChange={this.handleTitleChosen} searchable={this.state.searchable} />

我想呈现一个自定义optionsComponent：

optionsComponent={DropdownOptions}

通过查看示例，您可以呈现一个自定义组件，因此我进行了测试：

const DropdownOptions = React.createClass({
    propTypes: {
        children: React.PropTypes.node,
        className: React.PropTypes.string,
        isDisabled: React.PropTypes.bool,
        isFocused: React.PropTypes.bool,
        isSelected: React.PropTypes.bool,
        onFocus: React.PropTypes.func,
        onSelect: React.PropTypes.func,
        option: React.PropTypes.object.isRequired,
    },
    handleMouseDown (event) {
        event.preventDefault();
        event.stopPropagation();
        this.props.onSelect(this.props.option, event);
    },
    handleMouseEnter (event) {
        this.props.onFocus(this.props.option, event);
    },
    handleMouseMove (event) {
        if (this.props.isFocused) return;
        this.props.onFocus(this.props.option, event);
    },
    render () {
        return (
            <div className={this.props.className}
                onMouseDown={this.handleMouseDown}
                onMouseEnter={this.handleMouseEnter}
                onMouseMove={this.handleMouseMove} …

所以iam使用反应选择反应选择与redux-form与onBlur hack(？)在幕后工作正常,因为当我提交它时我在值中选择了数据

但是在访问任何多选字段后(即使我没有选择任何东西)我最终没有任何值(没有显示但是这个
))

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

<Select
            value="one"
            options={options}
            multi={true}
            {...input}
            onBlur={() => {
              input.onBlur({...input.value})
            }
          }
        />

所以我最终得到了redux状态的值,但我看不到该字段中的任何值.任何人都知道为什么会这样吗？

我在我的React应用程序中使用react-select作为可搜索的下拉列表。我指的是此链接https://github.com/JedWatson/react-select。

在下拉选项结构中，它需要label和value键入中的相应对象options。我的问题是，我没有任何label或value在我的options数据。我总共有不同的键。我希望通过其他键搜索下拉菜单tab。

• 我的React版本：15.6.2
• react-select版本：1.0.0-rc.10

我的下拉代码：

<Select
   name="selectSubTag"
   id="selectSubTag"
   value={this.state.selectedFilter.subTag}
   options={this.state.jobSubTags}
   onChange={this.setSubTag}
   placeholder="Select Sub Tag"/>

我的options数据如下所示：

    this.state.jobSubTags = [
{tab:"tabName 1",tabValue:1},
{tab:"tabName 2",tabValue:2},
{tab:"tabName 3",tabValue:3},
]

现在我希望通过下拉菜单中的“ tab”键搜索数据。

我正在使用 redux-form 中的字段数组，我的表单中需要一个可搜索的下拉菜单。我知道可以像这样完成正常的下拉菜单，

<Field name={`${object}.method`} component="select" validate={required} id={`${object}.key`}>
       <option value="id">id</option>
       <option value="css">css</option>
       <option value="xpath">xpath</option>
       <option value="binding">binding</option>
       <option value="model">model</option>
</Field>

但这不是可搜索的下拉列表。即使我要使用它，这也只是提供了一个基本的 html 选择，我如何才能将 css 样式应用于它以使其与其他引导程序元素匹配？

为了有一个可搜索的下拉列表，我正在使用react-select包。我试图做的是；

<Field
    name={`${object}.method`}
    type='text'
    component={this.renderDropdown}
    label="Method"
    validate={required}
    id={`${object}.key`}
    valueField='value'
/>

renderDropdown = ({ input, id, valueField, meta: { touched, error }, ...props }) => {
    return (
        <React.Fragment>
            <div className='align-inline object-field-length'>
                <Select {...input} id={id} value={input.value.value} onChange={input.onChange}
                    options={[
                        { value: 'id', label: 'id' },
                        { value: 'css', label: 'css' },
                        { value: 'xpath', label: 'xpath' …

我正在尝试使用react-avatar在react-select v2中的每个选项中添加图像。

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

import React from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import Select from 'react-select';
import Avatar from 'react-avatar';

const USERS = [
  {
    value: 'John Smith', label: 'John Smith', email: 'john@smith.com', avatar: '',
  },
  {
    value: 'Merry Jane', label: 'Merry Jane', email: 'merry@jane.com', avatar: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Hrithik_at_Rado_launch.jpg/220px-Hrithik_at_Rado_launch.jpg',
  },
  {
    value: 'Stan Hoper', label: 'Stan Hoper', email: 'stan@hoper.com', avatar: 'https://adminui.liscio.me/wp-content/uploads/2018/05/james_wurbs.png',
  },
];
const GRAVATAR_SIZE = 30;

const stringOrNode = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.node,
]);

const GravatarOption = createClass({
  propTypes: …

我不明白libraryvalueComponent和valueRendererfrom之间的区别。react-select

从文档...

valueComponent: 返回一种自定义方式来呈现/管理所选值的函数

valueRenderer: 返回以自定义方式呈现选定值的函数的函数（选项）{}

我正在使用本地范围限定我的 css 文件

modules: true,
localIdentName: "[name]__[local]_[hash:base64:5]"

在 webpack.config.dev 和 prod.js 中。我可以使用我为组件定义的样式，使用来自“./Component.css”的导入样式。现在我正在尝试使用 react-select 第三方组件。现在该组件具有我想要使用的预定义样式。要使用它，我按如下方式导入样式

导入'反应选择/dist/react-select.css'

但是样式没有被应用。如何为导入的组件启用预定义的样式。

我想使用 react-select 并在将页面背景颜色从白色更改为自定义后遇到了一系列问题。（问题在白色背景上并不像在 react-select 的 github 页面上那么明显）

我正在通过样式道具执行上述操作，因为 className 道具无法正常工作。

这是样式道具。

const colourStyles = {
    control: styles => ({ ...styles, backgroundColor: '#023950', color: 'white', border: 0 }),
    option: (styles) => {
        return {
            backgroundColor: '#023950',
            color: 'white'
        };
    },
    singleValue: styles => ({ ...styles, color: 'white' }),
};

这是问题列表，如果有人可以帮助解决这些问题。请参考附图。

1. 注意下拉菜单和选项之间的差距（当你点击下拉菜单打开选项时）
   • 如果你在这里看到http://jedwatson.github.io/react-select/，没有间隙但你也看不到源代码。单击源链接会显示 404。
   • 这里的所有演示，https://react-select.com/styles，都有这个差距问题。
2. 顶部和底部有一个白色间隙（在选项本身内）。这与第 1 点中提到的下拉菜单中的间隙不同。该间隙是透明的，显示了后面的内容。这个是白色的。
3. 长文本导致选项导致整个选项框出现奇怪的空白问题。有没有办法剪辑文本并将其转换为省略号，而不是使选项框更宽并具有水平滚动？
4. 与上述问题有关。如何关闭水平滚动。想要文本剪辑。
5. 关于使用 className 道具的问题，该类确实得到了应用。但是，只有 1 个最上面的 div。它不适用于子 div，它最终在 backgroundColor 中保持白色。

反应选择样式问题

我希望在我的反应选择组件中添加蓝色背景并为向下箭头图标着色。但是，我似乎无法找到正确的方法来定位我希望在选择看起来像的那一刻更改的选择部分....

我希望它更像......

我的代码目前...

  render() {
    const { selectedOption } = this.state;
    return (
      <Select
        value={selectedOption}
        styles={reactSelectStyles}
        onChange={this.passingprops}
        options={this.state.adminoptions}
      />
    );

  }
}

const reactSelectStyles = {
  icon: {
    fill: "blue"
  }
}

我是朝着正确的方向前进还是完全错过了目标？我觉得有一个简单的解决方案，我只是无法到达那里。

谢谢大家！

任何人都知道如何在 react-select v2 中使用自定义图标？版本 1 曾经有一个arrowRenderer道具，您可以将它传递给一个可以呈现不同内容的函数。这似乎不适用于 v2。

这是我目前所拥有的：

renderSearchIcon = () => (
  <svg {...svgProps}>
    <path d={path} />
  </svg> 
)

<Select
  {...this.props}
  arrowRenderer={this.renderSearchIcon}
  defaultValue={defaultValue}
  options={options}
  onChange={onSelectChange}
/>

但出于某种原因，我仍然得到默认的下雪佛龙。任何人都知道是否可以在 v2 上执行此操作？