标签: react-select

我正在使用Select.AsyncCreatable:

<Select.AsyncCreatable
      clearableValue={true}
      multi={true}
      scrollMenuIntoView={true}
      name="field-name"
      value={values}
      loadOptions={this.getOptions}
      onChange={value => {
        this.handleOnChange(value...)
      }}
      placeholder={this.defaultPlaceholder}
      />

如何编辑我创建的选项.我可以删除已创建的选项并重新输入它们,但是是否可以选择编辑选定的值？它会更舒服.

使用react-select时不是按选项值自动调整大小,而是使用width:100%如图所示:

选项很简短:

getOptions() {
    return [
        { value: 'AND', label: 'AND' },
        { value: 'OR', label: 'OR' }
    ]
}

产生它的代码:

<Select
    options={this.getOptions()}
    value={value}
    autosize={true}
    clearable={false}
    simpleValue
/>

是否有任何方法可以react-select通过自动调整大小来显示这些值,因此选择框与选项长度相同,例如,我可以将此选择框置于中心位置<div>？

更新于14.11.2017 在这个jsFiddle中可以看到完整的例子

我喜欢react-select的实现，并期待在我的项目中使用它。

有没有办法将搜索栏（a la react-widgets - DropdownList）添加到下拉列表中？在与我们的设计师和用户进行测试时，我们发现用户并不总是意识到下拉列表是可搜索的，并且由于这一功能，他们似乎压倒性地更喜欢 DropwdownList 小部件。

也就是说，我喜欢 react-select 的可定制性和功能集，并希望能够使用它。

-丹尼尔

我创建了带有formik的表单以进行表单验证。我使用了组件Formik，Form，Field form formik并对其进行了配置：

    import { Formik, Form, Field } from "formik";
    import { object, string } from "yup";
    import isEmpty from "lodash/isEmpty";
    import FormikSelectInput from "../common/FormikSelectInput";

    class App extends Component {
      render() {
        const options = this.props.categories.map(c => {
          return { label: c.name, value: c.name };
        });

        return (
          <Formik
            validationSchema={object().shape({
              category: string().required("Category is required.")
            })}
            initialValues={this.props.obj}
            onSubmit={(values, actions) => {
              console.log(values);
            }}
            render={({ errors, dirty, isSubmitting, setFieldValue }) => (
              <Form>
                <Field
                  name="category"
                  label="Categories"
                  value={this.props.obj.category.name}
                  options={options}
                  component={FormikSelectInput}
                />
                <button …

我想使用React-Select（版本2）来定制设计（选择）选项。

该文档建议更换组件将是我可以用来实现这一目标的一种方法。

不幸的是，我找不到显示该功能实现的示例。

有没有人可以向我介绍此功能的用法，从而使您拥有一个简单的自定义选项（也许标签和值在每个选项标签的左侧还包括SVG图形）。

提前谢谢了

React Async Select loadoption有时无法加载该选项。在几个查询集合反应后，这是一个非常奇怪的现象。loadoptions未加载任何值，但我从日志中可以看到，结果正确地来自后端查询。我的代码库完全是最新的，请使用react-select新版本并使用

“反应选择”：“ ^ 2.1.1”

这是我的react-async select组件的前端代码。我确实在getOptions函数中使用了反跳，以减少后端搜索查询的数量。我猜这应该不会造成任何问题。我想补充一点，在这种情况下，我观​​察到的是，loadoptions serach指示器（...）也没有出现在这种现象中。

import React from 'react';
import AsyncSelect from 'react-select/lib/Async';
import Typography from '@material-ui/core/Typography';
import i18n from 'react-intl-universal';

const _ = require('lodash');

class SearchableSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      searchApiUrl: props.searchApiUrl,
      limit: props.limit,
      selectedOption: this.props.defaultValue
    };
    this.getOptions = _.debounce(this.getOptions.bind(this), 500);
    //this.getOptions = this.getOptions.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.noOptionsMessage = this.noOptionsMessage.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleChange(selectedOption) {
    this.setState({
      selectedOption: selectedOption
    });
    if (this.props.actionOnSelectedOption) {
      // this is for …

我使用 React-Select 是因为它能够让用户在键入时过滤下拉列表。我需要添加另一个功能，根据下拉列表的另一个值，下一个下拉列表应该可见或隐藏。

我知道如何从父子传递道具。我无法弄清楚的是我怎样才能让 React-Select 消失？我检查了这里的文档，没有这样的属性。

我尝试手动编辑 HTML 属性：display =“none”或“block”，但它似乎没有改变任何内容。

现在的样子是这样的：

<FormGroup row>
    <Col md={6}>
        <Select 
            placeholder={label}
            name={fieldName}
            onChange={method1}
            options={options}
            display="none" />
    </Col>
</FormGroup>

我已经为那些和我有类似情况的人找到了解决这个问题的方法，请在这里查看。

我正在为我的组件使用异步反应选择，但无法解决默认选项的问题。文档无法帮助我，因为没有与我的问题相关的示例。

const campaignToOption = campaign => ({value: campaign.id, label: campaign.name});

const loadOptionsWrapper = fetchAll =>
    input => fetchAll({
        _limit: 10000,
        q: input,
        _sort: 'name',
        _order: 'asc',
    }).then(campaigns => _(campaigns).reject('meta').map(campaignToOption).values());

const defaultProps = {
    options: [],
    placeholder: 'Campaign: Not selected',
};

const CampaignFilter = props => {
    return <Async
        defaultOptions={[{label: 'All Campaigns', value: '-2', group: true}]}
        loadOptions={loadOptionsWrapper(props?.actions?.fetchAllCampaigns)}
        {...defaultProps}
        {...props}
    />;
};

export default CampaignFilter;

我想添加一个选项，让用户选择所有选项。因此，在 AsyncSelect 的情况下，选项是异步加载的。文档说我们可以使用defaultOptions。

defaultOptions 属性确定您的远程请求最初被触发的“时间”。该属性有两个有效值。向此道具提供选项数组将填充打开选择时使用的初始选项集，此时远程加载仅在过滤选项（在控件中键入）时发生。单独提供 prop（或使用“true”）告诉控件立即触发由 loadOptions 描述的远程请求，以获取 Select 的初始值。

当我们使用它时，我只能在下拉菜单中获得默认选项，如下所示`

但我的目标是获得像这张照片这样的组件`

我想在URL（myapp.com＃somevalue）中传递一个值作为哈希值，并在页面加载时让页面滚动到该项目-这正是自互联网开始以来使用哈希片段的行为。我尝试使用scrollIntoView，但在iOS上失败。然后，我尝试仅取消设置/设置window.location.hash，但似乎存在竞争条件。仅当延迟超过600ms时才有效。

我想要一个更可靠的解决方案，不想引入不必要的延迟。当延迟太短时，它似乎滚动到所需的项目，然后滚动到页面顶部。您不会在此演示中看到效果，但是会在我的实际应用中发生https://codesandbox.io/s/pjok544nrx第75行

  componentDidMount() {
    let self = this;

    let updateSearchControl = hash => {
      let selectedOption = self.state.searchOptions.filter(
        option => option.value === hash
      )[0];
      if (selectedOption) {
        // this doesn't work with Safari on iOS
        // document.getElementById(hash).scrollIntoView(true);

        // this works if delay is 900 but not 500 ms
        setTimeout(() => {
          // unset and set the hash to trigger scrolling to target
          window.location.hash = null;
          window.location.hash = hash;
          // scroll back by the height of the Search box …

App.js

import React, { Component } from "react";
import Select from "react-select";

const SELECT_OPTIONS = ["FOO", "BAR"].map(e => {
  return { value: e, label: e };
});

class App extends Component {
  state = {
    selected: SELECT_OPTIONS[0].value
  };

  handleSelectChange = e => {
    this.setState({ selected: e.value });
  };

  render() {
    const { selected } = this.state;
    const value = { value: selected, label: selected };
    return (
      <div className="App">
        <div data-testid="select">
          <Select
            multi={false}
            value={value}
            options={SELECT_OPTIONS}
            onChange={this.handleSelectChange}
          />
        </div>
        <p data-testid="select-output">{selected}</p> …