标签: react-select

我是新来的反应。

我正在尝试使用下面的库来使用下拉菜单。

当我添加“required”属性时，它不会使用表单标记对其进行验证。

https://www.npmjs.com/package/react-select

import React from 'react';
import Select from 'react-select';

const options = [{
        value: 'chocolate',
        label: 'Chocolate'
    },
    {
        value: 'strawberry',
        label: 'Strawberry'
    },
    {
        value: 'vanilla',
        label: 'Vanilla'
    },
];

class App extends React.Component {
    state = {
        selectedOption: null,
    };
    handleChange = selectedOption => {
        this.setState({
            selectedOption
        });
        console.log(`Option selected:`, selectedOption);
    };
    render() {
        const {
            selectedOption
        } = this.state;

        return ( <
            Select value = {
                selectedOption
            }
            onChange = {
                this.handleChange
            }
            options …

使用 React Select Async 链接选项的最佳实践是什么。

我的意思是：我有 3 个下拉菜单，第一个下拉菜单使用默认选项值填充，接下来的 2 个下拉菜单被禁用。

选择第一个下拉列表值应根据其值填充第二个下拉列表选项，依此类推下一个下拉列表。

所以我一直在尝试

import React from "react";
import Select from "react-select";
import AsyncSelect from "react-select/async";
import classnames from "classnames";
import Requests from "../services/requests";

const filterOptions = (inputValue, options) => {
  return options.filter(i =>
    i.label.toLowerCase().includes(inputValue.toLowerCase())
  );
};

class FieldsRenderer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: props.fields,
      containerClass: props.containerClass,
      stepSnapshot: null,
      selectOptions: {}
    };

    this.props.fields.map( (f) => {
      if(f.type === 'select' && typeof f.dependsOn !== 'undefined') {
        this.state.selectOptions[f.name] = …

如何在react-select中通过id设置值 例如，我想根据id的值来选择标签值。id =“2”结果=“夏天”

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { selectedOption: "" };
  }

  options = [
    { id: "1", value: "Spring", label: "Spring" },
    { id: "2", value: "Summer", label: "Summer" },
    { id: "3", value: "Autumn", label: "Autumn" },
    { id: "4", value: "Winter", label: "Winter" }
  ];

  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };

  render() {
    return (
      <Select
        value={this.state.selectedOption}
        onChange={this.handleChange}
        options={this.options}
      />
    );
  }
}

在这里您可以看到我的CodeSandbox。预先感谢您的帮助和指导

在可搜索的反应选择下拉列表中呈现大量数据的最佳方法是什么？我研究过窗口化，其中仅为在视口中可见的项目创建 DOM 节点。这可以通过使用react-window包和react-select来完成。但是，我想知道是否有比这更好的方法。

这是使用react-window和react-select的窗口实现

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import { FixedSizeList as List } from "react-window";

import "./styles.css";

const options = [];
for (let i = 0; i < 10000; i = i + 1) {
  options.push({ value: i, label: `Option ${i}` });
}

const height = 35;

class MenuList extends Component {
  render() {
    const { options, children, maxHeight, getValue } = this.props;
    const [value] = getValue();
    const …

我正在尝试使用react-select 创建一个选择元素，并为此使用Creatable 组件。

在我当前的实现中，它不会提示用户输入“创建”选项，如文档所示，它将 显示默认的“无选项”。

我也在使用redux-form库，但我不认为问题来自那里。

到目前为止，这是我的代码：

import Select from "react-select/creatable";
import React from "react";

const customFilter = (option, searchText) => {
  return option.data.searchfield.toLowerCase().includes(searchText.toLowerCase());
};

export default (props) => {
  const { input, options, placeholder } = props;

  const renderValue = (value) => {
    const val =
      value === "" ? null : options.find((obj) => obj.value === input.value);
    return val || "";
  };

  return (
    <Select
      value={renderValue(input.value)}
      name={input.name}
      onFocus={() => input.onFocus(input.value)}
      onChange={(value) => input.onChange(value.value)}
      onBlur={() => input.onBlur(input.value)} …

我正在使用 React Hooks 和 Effector 尝试将数据渲染到卡片上。数据将从React-Select下拉列表中删除（代表不同的国家/地区），其想法是用户将能够根据这些国家/地区添加选择，有点像 TODO 应用程序。

但是，我发现每当我返回上一个下拉选择时，数据都不会保存。我使用effector，hooks，react-select和react-jss对造型。团队作为React-Select组件的道具传递。

const PlayerComponent = ({ containerStyles, team }) => {

    const [items, setItems] = useState([]);

    const teamsStore = useStore(testTeams);
    const playersStore = useStore(testPlayers);

    useEffect(() => {

        const playersByTeam = playersStore.filter(
            (player) =>
                player.teamId ===
                teamsStore.find(function (t) {
                    return t.label === team;
                }).teamId
        );
    
        setItems(
            playersByTeam.map(function (player) {
                let players = { name: player.name };
                return players;
            })
        );
    }, [playersStore,team,teamsStore]); …

我正在使用react-select来更好地查看UI，并且我已经实现了它，现在我想做的是

• 我想在用户单击“完成”按钮（表单提交）时验证该输入字段
• 我正在使用react-hook-form进行验证
• 他们提供ref={register}保存输入字段值的
• 所以对于正常的输入字段或选择我可以像下面一样使用它

<label  htmlFor="fname">
    First Name
</label>
<input
    type="text"
    name="fname"
    id="fnameid"
    className="form-control"
    ref={register({
        required: 'First name is required',
    })}
/>

{errors.fname && (
    <div>
        <span className="text-danger">
            {errors.fname.message}
        </span>
    </div>
)}

现在上面的工作正常，但如果react-select我不知道如何继续

<Select
    value={initailSelect}
    onChange={(e) => onChangeAge(e)}
    options={data}
/>

因此，当我单击“提交”按钮时，它仅对 fname 进行验证，并仅在控制台上为 fname 提供输出

我尝试像下面这样做

<Select
    value={initailSelect}
    onChange={(e) => onChangeAge(e)}
    options={data}
    ref={register({
        required: 'age is required is required',
    })}
/>

代码沙箱这是我的代码沙箱我的工作代码，请检查

编辑

我尝试了这种方法，但它不占用defaultValue或Value，因为我想显示选定的一个值，并且在某些情况下，我从服务器获取我想显示为选定的值。

当我输入文本时出现意外的蓝色边框。请检查图像。我尝试control通过设置零或无来编辑样式border，甚至删除boxShadow. 但没有任何作用。请检查图像。

control: (provided) => ({ ...provided, boxShadow: 'none', border: 0, }),

您可以找到下面的示例来查看我的问题： codesandox example

如果我设置对象的 name 属性，它就可以正常工作。但它在我的应用程序的其他示例中不起作用：

  setRegion(item.name);

应用示例：

我的usestate看起来像这样：

 const [department, setDepartment] = useState("");

这是我的应用示例：

                      <div className="sui-search-box">
                        <div className="department">
                            <label>
                              Department:
                              <Select id="depart" value={department} onChange={selectedValue => 
                                {
                                setDepartment(selectedValue.value);
                                setFilter("department", selectedValue.value, "any")
                              }}
                              options = {
                                results.map((depart, index) => {
                                  return {
                                    label: depart.name,
                                    value:depart.name,
                                    key:index
                                  }
                                })
                              }
                              />
                              {department}
                              </label> 
                          </div>
                     </div>

设置状态的正确方法是什么以及为什么我当前的沙箱未正确绑定？

我正在使用 React 选择组件来进行下拉选择。所有功能都工作正常，但当从下拉列表中选择选项时，我无法设置所选选项背景颜色的样式。尝试了几个选项，但也不起作用。

下面是相同的代码：-

import React, { useContext, useState } from "react";
import moment from "moment";
import Select from "react-select";
import DataProvider from "context/DataContext";

export default function Compare() {
  const [selectedValue, setSelectedValue] = useState([]);
  const {
    fromDate,
    toDate,    
  } = useContext(DataProvider);

  const customStyles = {           
    option: (base, state) => ({
      ...base,      
      color: "#1e2022",
      backgroundColor: state.isSelected ? "rgba(189,197,209,.3)" : "white",
      padding: ".5rem 3rem .5rem .5rem",
      cursor: "pointer",
    }),       
    singleValue: (provided, state) => {
      const opacity = state.isDisabled ? 0.5 : 1; …