标签: react-select

我一直在尝试自定义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 选项卡手动更改样式，则选择的屏幕截图如下：

没有错误消息。

谢谢。

我正在 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以及Formik和Yup进行验证问题是，即使我在通过Yup验证后在控制台中的错误对象中看到错误，但我无法在前端显示该错误

这是下面的代码

export default function FormSection({\n  onContinueButton,\n  allFormValues,\n  holders,\n}) {\n  console.log(holders, "hol12");\n\n  const formik = useFormik({\n    initialValues: {\n      firstBirthDate: "",\n      firstSmoker: "",\n      secondBirthDate: "",\n      secondSmoker: "",\n    },\n\n    onSubmit: (values, { setSubmitting }) => {\n      console.log(formik.errors);\n      console.log(formik.values, "valqwqrwe");\n\n      setSubmitting(false);\n      allFormValues(formik.values);\n      console.log(values);\n    },\n    validationSchema: validationSchemaSectionTwo,\n  });\n  const options = [\n    { value: "N\xc3\xa3o", label: "N\xc3\xa3o" },\n    { value: "Sim", label: "Sim" },\n  ];\n\n  const handleChangeFirstHolder = (selectedOption) => {\n    formik.setFieldValue("firstSmoker", selectedOption);\n  };\n\n\n  return (\n    <div className="secondSection">\n      <form onSubmit={formik.handleSubmit}>\n        <React.Fragment>\n <p …

大家好，我遇到了有关react-select onBlur 函数的问题，我做了很多研究并研究了相关的git 问题，但仍然找不到答案。OnBlur 函数未获取选定的值，onBlur 中的值显示为未定义。如果答案可用，请推荐我。谢谢您的帮助

Codesanbox 参考链接：

import React, { useState } from "react";
import Select from "react-select";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState();
  const options = [
    {
      label: "first option",
      value: 1
    },
    {
      label: "second option",
      value: 2
    },
    {
      label: "third option",
      value: 3
    }
  ];

  const onSelect = (value) => {
    setValue(value);
  };
  const onBlurValue = (value) => {
    console.log(value);
  };

  return (
    <div>
      <Select
        value={options.label}
        options={options}
        onChange={onSelect} …

我正在使用react-select构建一个可重用的组件来选择美国州。我试图传递一个州值（如“OH”）来设置默认值，但似乎无法理解这一点。

我的数据（小样本）：

 const statesJson = [
  {
    "label": "Alabama",
    "value": "AL"
  },
  {
  "label": "Alaska",
  "value": "AK"
  },
  {
  "label": "American Samoa",
  "value": "AS"
  },
  {
  "label": "Arizona",
  "value": "AZ"
  },
  {
  "label": "Ohio",
  "value": "OH"
  }
]

我的组件：

import React, { Fragment, useState} from "react";
import statesJson from "./states";
import Select, { components } from "react-select";
import styled from "styled-components";
import PropTypes from "prop-types";

const StyledSelect = styled(Select)`
  font-size: 16px;
  font-weight: normal;
  color: #041e41;
  width: 250px;
`;

const propTypes …

我想将 onScroll 处理程序添加到反应选择组件的 menuList 中，但以下内容不起作用。我怀疑我需要onScroll为其中一个子元素设置 ，而不是为包含子元素的元素设置 ，但我不知道该怎么做。

import React from 'react';

import Select, { components, MenuListProps } from 'react-select';
import {
  ColourOption,
  colourOptions,
  FlavourOption,
  GroupedOption,
  groupedOptions,
} from './docs/data';


const handleScroll = () =>{
  console.log('scrolling')
}

const MenuList = (
  props: MenuListProps<ColourOption | FlavourOption, false, GroupedOption>
) => {
  return (
    <components.MenuList {...props}>
      <div onScroll={handleScroll}>
        {props.children}
      </div>
    </components.MenuList>
  );
};

export default () => (
  <Select<ColourOption | FlavourOption, false, GroupedOption>
    defaultValue={colourOptions[1]}
    menuIsOpen={true}
    options={groupedOptions}
    components={{ MenuList }}
  />
); …

我对 Chakra UI 的选择组件有疑问。它以某种方式不会重置它们的值。另外，当我按下按钮时，选择组件不会呈现新值

https://codesandbox.io/s/compassionate-shockley-f9chz?file=/src/app.tsx:518-863

export const App = (): JSX.Element => {
  const [value, setValue] = React.useState("in");
  const onClick = () => {
    setValue(null);
  };

  console.log("App value", value);

  return (
    <div>
      <Select options={selectionOptions} value={value} />
      <Button onClick={onClick}> click </Button>
    </div>
  );
};

  const [value, setValue] = useState(propValue);

  useEffect(() => {
    if (handleChange) {
      handleChange(value);
    }
  }, [handleChange, value, setValue]);

    <Select
      {...rest}
      value={value}
      onChange={(event) => {
        setValue(event?.target?.value);
      }}
    >
      {options.map(({ value: currentValue, name }, index) => (
        <option key={index} value={currentValue}> …