标签: react-select

下面是我尝试从下拉列表中选择值的代码。 handleChange不起作用，当我从下拉列表中选择值时，它不会使用下拉列表中选定的值进行更新。它正在消失（空白）。

当我选择它时，下拉值会被填充，它不会捕获新的选定值。

有人可以帮助我解决这个问题吗？就像我在这里缺少的一样？

export const FormikSelectField = ({ label, ...props }) => {
  const [field, meta] = useField(props);
  const [isFocused, setOnFocus] = useState(false);

  const handleChange = (value) => {
    // this is going to call setFieldValue and manually update values.topcis
    console.log('Value in handlechange..', value ,'and', props.name);
    props.onChange(props.name, value.value);
  };

  const handleFocus = () => {
    setOnFocus(true);
  };
  const handleBlur = (e) => {
    // this is going to call setFieldTouched and manually update touched.topcis
    setOnFocus(false);
    props.onBlur(props.name, true);
    field.onBlur(e); …

我有以下反应列表。

<select
    id="sponsor" 
    name="sponsor"
    className="form-control"
    placeholder="Sponsor"
    }
    >
    <option value="" selected>Please select the sponsor</option>
     {
     active && result.map((sponsor:Sponsor,index:number)=>
          <option  value={sponsor.id} >{sponsor.name}</option>    
      )
    }

</select>

它工作得很好。现在我需要将其更改为可搜索列表。我在下面做了。

     import VirtualizedSelect from 'react-virtualized-select'
    import "react-virtualized-select/styles.css";
    import 'react-virtualized/styles.css'
     

 <VirtualizedSelect
        id="sponsor" 
        name="sponsor"
        className="form-control"
        placeholder="Sponsor"
        options={ active && result.map((sponsor:Sponsor,index:number)=>
            {sponsor.name}
          
        )}

     >
       </VirtualizedSelect> 

现在列表中没有任何内容。基本上我的要求是使列表可搜索并将API 数据插入该列表。

你能帮我做同样的事吗？任何其他选择也会非常有帮助

Edit1:-

我需要如下列表。第一行“请选择赞助商”

我正在尝试将此组件与使用es5的异步选项一起使用。我的componentDidmount中有一个服务调用，该调用使用回调设置school数组：

componentDidMount: function(){

    SchoolsDataService.getSchools(
        this.setSchoolsState
    );

将学校列表设置为状态数组

setSchoolsState: function(data){

    this.setState({schools: data.schools})

},

服务：

getSchools: function (callback) {

    var url = 'xxxx';

    request
        .get(url)
        .set('Accept', 'application/json')
        .end(function (err, res) {
            if (res.ok) {
                var data = res.body;
                if (data) {
                    callback(data);
                }
            }
        });
}

如何使用文档中的示例进行设置？我在哪里将这样的异步版本的服务调用放在哪里并生成选项列表？

var getOptions = function(input, callback) {
setTimeout(function() {
    callback(null, {
        options: [
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' }
        ],
        // CAREFUL! Only set this to true when …

我react-select用来允许用户选择他们的出生年份。如果用户已经填写过，它将被预设为某个值，例如1950。输入显示正确的值，但是当打开菜单时，它将滚动到顶部并显示最近的年份（2018、2017， 2016等）。

如何将其向下滚动至1950，并默认突出显示该项目？

我的代码：

class YearPicker extends React.PureComponent {
    options = [
        {label: 2018, value: 2018},
        {label: 2017, value: 2017},
        // ...
        {label: 1950, value: 1950},
        {label: 1949, value: 1949},
        // ...
    ]

    render () {
        return (
            <Select
                options={this.options}
                value={this.props.value}
            />
        )
    }
}

CodeSandbox —默认应为2002。选择一个值（2002或其他方式）后，它可以正常工作，但是当页面首次加载时，您必须在菜单中向下滚动以找到该值。

每对文档我曾尝试value和defaultValue并selectedOption，但似乎没有任何工作。我通过利用onMenuOpen渲染后找到正确的DOM元素然后滚动到它来创建一个非常棘手的解决方法，但是这破坏了箭头键的功能。

有没有办法更改选项对象的字段？

从我的BE API中，我得到：

const items = [{ id: 1, name:'dropdown1'}, { id: 2, name:'dropdown2'}];

因此，现在我必须将字段重新映射到value和label，如果可以动态设置这些字段，那就太好了，也许是这样的：

    <Select
      optionRemapping={{value: 'id', label: 'name'}}
      options={items}
    />

或者，也许我错过了人们如何做到这一点的模式？

进行以下操作感觉有点不对。

items.map((item) => {
  return { value: item.id, label: item.name };
});

我有一个在react-select中显示的选项列表。由于此组件位于屏幕的下边缘，因此项目往往会从屏幕上被切除。

我注意到，官方提供的react-select中提供的选择列表具有滚动条。我曾尝试查看文档和GitHub页面，但仍然找不到解决方案。

下图显示了我的反应选择选项列表的显示方式。

我的问题是如何使列表显示为可滚动的。

以下是我使用的代码。

import Select from 'react-select';

const SearchSelect = (props) => {
  const { options, defaultValue, onChange, name, label } = props;
  return (
    <>
      {label && <label htmlFor="search-select">{label}</label>}
      <Select
        options={options}
        defaultValue={defaultValue}
        onChange={onChange}
        name={name}
        id="search-select"
      />
    </>
  );
};

选项值最初是从API获取的，并从父级传递到此组件中。

我正在使用react-select库创建自动完成下拉列表。如果2nd有一些数据，我使用了2个下拉并行，并且我先打开了一个，然后出现zIndex问题。看图片

我与使用反应表单验证工作Yup，沿Formik。react-select表单中的一个元素也需要验证。为了验证我正在做使用validationSchema的Formik，以验证形式值的变化。我只需要选择字段的值作为字符串，所以不能采用完整的对象（键值）。选择字段运行良好，但是没有清除验证错误消息。问题是如何使用现有方法验证选择字段？

以下是最少的代码示例。

import ReactDOM from "react-dom";
import React, { useState } from "react";
import { Grid, TextField, Button } from "@material-ui/core";
import { Formik } from "formik";
import * as Yup from "yup";
import Select from "react-select";
import "./styles.css";

function App() {
  const [selectedYear, setSelectedYear] = useState("");

  const testSchema = Yup.object().shape({
    name: Yup.string().required("Enter Name"),
    year: Yup.string().required("Select Year")
  });

  const initialValues = {
    name: "",
    year: ""
  };

  const handleYearChange = …