标签: react-select

大家好，我在我的项目中使用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}> …

我正在使用反应选择库为我的下拉可搜索组件创建一个测试。在自定义该组件时，
我无法data-testid向组件添加属性，因为它是在反应选择文档中定义的。Option

该data-testid属性不会显示在Option元素的 DOM 中。

选项组件

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

const CustomOption = (props: OptionProps<SearchDropdownOption, false>) => (
  <components.Option {...props} data-testid="test-id" />
);

例如，我成功使用了DOM 中显示Input的下拉列表和属性的搜索版本组件：data-testid

输入组件

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

const CustomInput = (props: InputProps<SearchDropdownOption, false>) => (
  <components.Input {...props} data-testid="test-id" />
);

而不是在Select组件中使用它：

<Select<SearchDropdownOption, false>
  components={{
    Input: CustomInput,
    Option: CustomOption,
  }}
  isSearchable={isSearchable}
/>

我有一个使用反应选择的自定义组件。这使用了Createable Selectand 看起来像：

import CreatableSelect from "react-select/creatable";
import {
  ActionMeta,
  MultiValue,
  MultiValueGenericProps,
  OptionProps,
  StylesConfig,
  components,
} from "react-select";


type UserOption = {
  value: number;
  label: string;
  logo?: string;
};


type CustomUserInputProps = {
  userOptions: UserOption[];
  onChange: (
    newValue: MultiValue<UserOption>,
    actionMeta: ActionMeta<UserOption>
  ) => void;
  onBlur: ChangeEventHandler;
  value: UserOption[];
  name: string;
}


export function CustomUserInput ({
  userOptions,
  onChange,
  onBlur,
  value,
  name,
  disabled,
  isEdited,
}: CustomUserInputProps ) {
   ...
   return (
         <CreatableSelect
          options={userOptions}
          onChange={onChange}
          placeholder={""}
          isMulti={true}
          onBlur={onBlur}
          value={value}
          name={name}
          components={{ …

我正在使用react-select来自动完成搜索栏中的选项.搜索栏以两种类别之一显示结果,具体取决于它命中的API端点.

现在,它可以处理来自任何一个点或另一个点的数据,但是我无法将数据从两个端点返回到react-select的loadOptions参数.

从这个关于多个API调用的答案,我决定使用promises一次返回所有数据,但是我得到了错误Uncaught TypeError: promise.then is not a function at Async.loadOptions

这是我的代码loadOptions:

const getAsync = (tripId, destinationIndex, input) => {
  if (!input) {
    return { options: [] }
  }

  function getMusement(input) {
    return new Promise(function(resolve, reject) {
      TVApi.musement.autocomplete(input)
        .then((m) => {
          const musementOptions = m.map(musementToOption).slice(0, 4)
          return resolve(musementOptions)
        })
    })
  }

  function getFourSquare(tripId, destinationIndex, input) {
    return new Promise(function(resolve, reject) {
      TVApi.spot.autocomplete(tripId, destinationIndex, input)
        .then((fs) => {
          const fsOptions …

我正在尝试创建一个react-select异步输入字段，该字段根据用户输入提供型号。我的 API 和 Fetch 都在工作，它正在生成填充下拉列表所需的确切“选项”对象（我检查了网络请求和控制台）。

问题是当我开始输入时，下拉列表显示它正在加载，但没有添加任何选项。

以下是 Fetch 调用的示例输出： {options: [{value: "WA501006", label: "WA501006"}]}.

这是我的代码：

getModelsAPI = (input) => {

        if (!input) {
            return Promise.resolve({ options: [] });
        }

        const url = `(...)?cmd=item_codes_json&term=${input}`;

        fetch(url, {credentials: 'include'})
            .then((response) => {
                return response.json();
            })
            .then((json) => {
                const formatted = json.map((l) => {
                    return Object.assign({}, {
                        value: l.value,
                        label: l.label
                    });
                })
                return { options: formatted }
            })
    }

onChange = (value) => {
    this.setState({
        value: value
    })
}

<Select.Async …

我在我的带有样式组件的项目中使用 React Select v2，我需要能够在菜单打开时将箭头指示器倒置，这在 v1 中受支持。

我有点设法通过这样做来做到这一点：

   css`
     &.react-select__control--is-focused {
       & .react-select__indicators {
         & .react-select__dropdown-indicator {
           transform: rotate(180deg);
         }
       }
     }
   `;

问题是，如果我按下箭头打开菜单并再次单击它关闭它，箭头保持倒置，因为选择仍然是焦点，这在 UIX 方面感觉有点奇怪。

是否有根据菜单状态旋转它的正确方法？我在文档中寻找了一些东西，但找不到。

也许我错过了，如果有人能指出我正确的方向，那就太棒了！

谢谢！