标签: react-select

我想通过单击按钮打开反应选择菜单。

这是代码沙盒的链接

https://codesandbox.io/s/material-demo-kssrb

我知道一个反应选择属性“menuIsOpen”，该属性的缺点是菜单始终打开，并且因此丢失了默认关闭行为。

任何帮助表示赞赏。

我一直在尝试自定义react-select AsyncSelect 加载消息和无选项消息，但到目前为止没有运气。

这是我当前的代码：

                    <AsyncSelect
                        noOptionsMessage={() => 'nothing found'}
                        LoadingMessage={() => 'searching...'}
                        cacheOptions
                        loadOptions={searchForPointsOfInterest}
                        getOptionLabel={(option) => option.name}
                        getOptionValue={(option) => option}
                        defaultOptions
                        isRtl={true}
                        isClearable={true}
                        placeholder="example"
                        isLoading={isLoading}
                        onChange={onPointOfInterestChange}
                        defaultValue={props.area}
                    />

我们正在我们的一个项目中使用反应选择组件并尝试解决可访问性问题。目前，无法向具有 aria-autocomplete="list" 属性的输入元素提供所需的 aria 属性。

https://www.digitala11y.com/aria-autocomplete-properties/

上面是我们想要实现的目标的参考链接。以下是上述链接中的短篇故事。

If an element has aria-autocomplete set to list or both, authors MUST ensure both of the following conditions are met:

The element has a value specified for aria-controls that refers to the element that contains the collection of suggested values.
Either the element or a containing element with role combobox has a value for aria-haspopup that matches the role of the element that contains the collection of suggested values.

我打开了一个 PR，以添加将 ARIA 属性添加到输入元素的功能。 …

我正在尝试缩小反应选择的选择组件的大小。除了一个例外，一切都运行得很好。

我希望删除其填充的元素具有此类：css-tlfecz-indicatorContainer并且是反应选择的子组件Select组件的子组件，更准确地说，是负责渲染\xc3\x97符号以清除选择的子组件。

我尝试将其放入 Select 的 styles 属性中：

indicatorsContainer: (provided, state) => {\n  return {\n    ...provided,\n    padding: \'0px\',\n    paddingLeft: \'0px\',\n    paddingTop: \'0px\',\n    paddingRight: \'0px\',\n    paddingDown: \'0px\',\n  };\n},\n

但这不起作用。我期望有一个 IndicatorContainer 可样式组件，这样我就不必用自己的组件覆盖组件，但我认为这是唯一的方法。

如果我从 DevTools\' Elements 选项卡手动更改样式，则选择的屏幕截图如下：

没有错误消息。

谢谢。

我已将 React-select 元素与 Formik 连接起来。验证在桌面浏览器中运行良好。但在移动浏览器或移动浏览器模拟器中，我在第一次 React-select 元素值更改时收到验证错误。但我在下一个值更改时没有收到错误。这是 Formik 或 React-select 中的错误吗？有可能解决这个问题吗？

这是codesandbox上的示例： https://codesandbox.io/s/musing-mcnulty-62euu ?file=/index.js

请仅在移动浏览器或移动浏览器模拟器中检查它，因为验证在桌面浏览器中工作正常。

我正在尝试验证表单。当我将 React-select 组件插入到控制器中时，问题就出现了：即使规则设置为“required: true”，如果 Controller 后又出现一个正常的输入框错误，它会跳转到下一个并失去焦点控制器错误（在本例中为“品牌评论部分”）。这里是代码：

export default function Proof() {
    const { register, handleSubmit, errors, control } = useForm();
    const refReactSelect = useRef();

    const createHandler = (data) => {
        console.log(data);
    }
    return (
        <div>
            <form onSubmit={handleSubmit(createHandler)}>
                <label className="font-weight-medium" htmlFor="productCategory">Category</label>
                {/* Name */}
                <div className="form-group pb-2">
                    <label className="font-weight-medium" htmlFor="productName">Name</label>
                    <input
                        className="form-control"
                        type="name"
                        id="productName"
                        name="productName"
                        ref={register({ required: true })}
                    />
                    {errors.productName && errors.productName.type === "required" && (
                        <p className="text-danger">{"Empty name"}</p>
                    )}
                </div>

                <Controller
                    name="productCategory"
                    as={
                        <Select
                            ref={refReactSelect}
                            options={categories}
                            isSearchable={true}
                            placeholder="Select"
                            id="productCategory" …

useState不会立即更新状态。

我正在使用react-select，我需要加载multi根据请求结果选择的 ( ) 选项的组件。

因此，我创建了 statedefaultOptions来存储常量的值queues。

事实证明，加载组件时，值 \xe2\x80\x8b\xe2\x80\x8bar 仅在第二次显示。

我console.log在 中做了一个queues，返回与空不同。

我对状态做了同样的事情defaultOptions，返回的是空的。

我创建了一个codesandbox以便更好地查看。

const options = [\n  {\n    label: "Queue 1",\n    value: 1\n  },\n  {\n    label: "Queue 2",\n    value: 2\n  },\n  {\n    label: "Queue 3",\n    value: 3\n  },\n  {\n    label: "Queue 4",\n    value: 4\n  },\n  {\n    label: "Queue 5",\n    value: 5\n  }\n];\n\nconst CustomSelect = (props) …

我正在 ReactJS 中开发一个应用程序，我有以下代码：

import React, { useState, useEffect } from "react";
import {Form } from "react-bootstrap";
import Select from "react-select";

const App = () => {

    const [validated, setValidated] = useState(false);

    const [select, setSelect] = useState({
        name: "",
        category: ""
    });

    const handleChange = e => {
        const {name, value} = e.target;
        setSelect(prevState => ({
        ...prevState,
        [name]: value
        }));
    };

    const [data, setData] = useState([]);
    ...
    /* get data */
    ...

    const categories = data.map((item) => ({ value: item.id, label: …

为什么即使光标在另一个选项中，react-select的焦点总是移动到第一个元素？

我目前正在使用版本“react-select”：“^4.3.0”，

      <Select 
      defaultValue={[options[4], options[5]]}
      name="clothes"
      options={options}
      isMulti
      onChange={handleChange}
      />

我怎样才能解决这个问题？

我需要更改 中箭头的样式react-select。components我了解到这可以通过使用下面的代码示例中的 prop来完成。

DropdownIndicator然而，如果打开菜单，出现的道具似乎不会提供任何信息。我需要使用该信息来根据菜单是打开还是关闭来更改箭头样式。

我怎样才能得到这些信息？

import ReactSelect, { components } from 'react-select';

...

const DropdownIndicator = (props) => {  
  const { isFocused } = props;
  
  // Which prop tells if the menu is open? Certainly isFocused is not the correct one.
  const caretClass = isFocused ? 'caret-up' : 'caret-down';

  return (
    <components.DropdownIndicator {...props}>
      <div className={`${caretClass}`} />
    </components.DropdownIndicator>
  );
};

return (<ReactSelect
 components={{ DropdownIndicator }}
 placeholder={placeholder}
 value={value}
 onBlur={onBlur}
 name={name}
 ...
/>)