标签: react-select

所以我正在尝试设置 react-select 组件的输入字段的样式。不幸的是，字体系列被标准输入元素覆盖，因为样式被应用于包装器 div 而不是输入字段本身。

input: () => ({
  fontFamily: `${theme.fonts.tabs.family} !important`,
  fontWeight: theme.fonts.tabs.weight,
  fontSize: 18,
  color: theme.colors.secondary,
  height: 24
}),

我将如何在不使用类名的情况下更改 fontFamily？

这段代码产生了什么 我想要的是

我正在尝试将用于react-select多选指示器的图标更改为字体很棒的图标，但它不起作用。知道为什么吗？

import React from "react";
import Select, { components } from "react-select";
import { colourOptions } from "./docs/data";

const Placeholder = props => {
  return <components.Placeholder {...props} />;
};

const CaretDownIcon = () => {
  return <i className="fas fa-caret-down" />;
};

const DropdownIndicator = props => {
  return (
    <components.DropdownIndicator {...props}>
      <CaretDownIcon />
    </components.DropdownIndicator>
  );
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    components={{ Placeholder, DropdownIndicator }}
    placeholder={"Choose"}
    styles={{
      placeholder: base => ({
        ...base,
        fontSize: "1em",
        color: colourOptions[2].color, …

我正在使用react-select从 api 加载结果并使用lodash.debounce对查询进行去抖动：

import React, {useState} from 'react';
import AsyncSelect from 'react-select/lib/Async';
import debounce from 'lodash.debounce';
import {search} from './api';

const _loadSuggestions = (query, callback) => {
  return search(query)
    .then(resp => callback(resp));
};

const loadSuggestions = debounce(_loadSuggestions, 300);

function SearchboxTest() {
  const [inputValue, setInputValue] = useState("");

  const onChange = value => {
    setInputValue(value);
  };

  return (
    <AsyncSelect
      value={inputValue}
      loadOptions={loadSuggestions}
      placeholder="text"
      onChange={onChange}
    />
  )
}

当我第一次在搜索框中输入某些内容时，它似乎工作正常（查询已去抖动并且建议已正确填充），但如果我尝试输入新值，则会按预期触发第二个提取查询，但建议来自不会显示第二个调用（并且我没有收到 react-select 显示的“正在加载...”消息）。

当我不去抖动呼叫时，问题似乎消失了（对于第一次和任何后续呼叫）：

import React, {useState} from 'react';
import …

我想使用react-select作为ag-grid的自定义单元格编辑器

这是代码沙箱链接

您可以在此处下载源代码

npm install
npm start

我已经删除了所有的css，因此看起来很普通，但是仍然可以完成工作。

这是我的package.json

{
  "name": "Test",
  "version": "1.5.0",
  "private": true,
  "dependencies": {
    "react": "16.8.1",
    "react-dom": "16.8.1",
    "react-select": "^2.4.1",
    "react-scripts": "2.1.5",
    "ag-grid-community": "20.1.0",
    "ag-grid-react": "20.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "npm run build",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" …

我正在使用 react-hook-forms Controller api 围绕来自 react-select 的 AsyncSelect 加载选项，因为用户从外部 API 键入。一切正常，除了返回的值作为字符串"[object Object]"而不是对象的 fullName 属性返回。

我的组件：

           <Controller
            control={control}
            name="businessCategory"
            as={
              <AsyncSelect
                className="react-select-container"
                loadOptions={v => handleAutocompleteLookup(v)}
                onChange={handleCategoryInputChange}
                getOptionLabel={option => option.name}
                getOptionValue={option => option.fullName}
              />
            }
          />

我的 handleChange 函数。SetValue 来自 react-hook-form：

  const handleCategoryInputChange = newValue => {
    return setValue('businessCategory', newValue, true);
  };

我的任何数据都是具有以下形状的对象数组：

{
  fullName: "DJ service"
  id: "gcid:dj"
  name: "DJ service"
  publisher: "GMB"
}

任何有关这方面的线索将不胜感激，谢谢！

我使用的是@coreui/react与React-select问题是，返回Select的元素scoped slots符core-ui的功能就像搜索和排序

但是，如果在返回带有文本Ex 的a<label>或 a时它工作正常：<p><label>{item.status}</label>

import React from "react";
import Select from "react-select";
import { CDataTable } from "@coreui/react";

...

  <CDataTable
    bordered
    clickableRows
    fields={fields}
    hover
    items={[...employeeData]}
    itemsPerPage={10}
    itemsPerPageSelect
    loading={tableLoader}
    onRowClick={(e) => rowSelectHandler(e)}
    pagination
    size="sm"
    sorter={{ resetable: true }}
    striped
    tableFilter={{
      placeholder: "Filter",
      label: "Search:",
    }}
    scopedSlots={{
      status: (item, …