标签: react-select

我正在使用带有react-hook-form库的react-select下拉菜单。我正在调用 api 来获取反应选择的默认值。最初，下拉列表无法预填充默认值。所以我找到了一个解决方法，当我从 api 获取数据时重新渲染整个 JSX。

<form onSubmit={handleSubmit(saveData)}>
{!countryValue && (
      <Controller
        name="country"
        control={control}
        render={({ onChange, value, ref }) => (
          <Select
            options={country}
            value={country.find((c) => c.value === value)}
            onChange={(val) => onChange(val.value)}
          />
        )}
        rules={{ required: true }}
      />
    )}
    {countryValue && (
      <Controller
        name="country"
        control={control}
        render={({ onChange, value, ref }) => (
          <Select
            options={country}
            value={country.find((c) => c.value === value)}
            onChange={(val) => onChange(val.value)}
            defaultValue={country.find((c) => c.value === countryValue)}
          />
        )}
        rules={{ required: true }}
      />
    )}
{errors.country && <div>Field is rquired</div>} …

有没有办法增加菜单高度？我可以用属性来降低菜单的高度maxMenuHeight。但我找不到增加其高度的方法。我什至尝试过minMenuHeight财产，但那不起作用。这是我的代码以及自定义样式：

const defaultStyles = {
        control: (base, state) => ({
            ...base,
        }),
        menu: base => ({
            ...base,
        }),
        menuList: base => ({
            ...base,
        })
    }

    const customStyles = {
        control: (base, state) => ({
            ...base,
            background: "#000000",
            // match with the menu
            borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
            // Overwrittes the different states of border
            // Removes weird border around container
            boxShadow: state.isFocused ? null : null,
        }),
        menu: base => ({
            ...base, …

我正在使用反应选择包并使用自定义选项数组来填充数据（即自定义标签等）

我已经看到了一些解决方案，他们没有使用选项道具来设置值，或者只是使用默认数组模式来填充数据并设置值并获取它onChange，但是在我的情况下我无法获取值：

• 如果我设置value属性，它不会让我选择选项

• 如果我传递相同的(option) => option.phaseText) onChange，它将以字符串形式返回

  const HandelChange = (obj) => {
      console.log(obj);
  };
  const [dataPhase, setDataPhase] = useState([
      { phaseID: 1, phaseText: "Item 1" },
      { phaseID: 2, phaseText: "Item 2" },
      { phaseID: 3, phaseText: "Item 3" },
      { phaseID: 4, phaseText: "Item 4" },
      { phaseID: 5, phaseText: "Item 5" },
  ]);
  
  <Select
     isSearchable
      options={dataPhase}
      getOptionLabel={(option) => option.phaseText}
      getOptionValue={(option) => option.phaseText}
      className="diMultiSelect"
      classNamePrefix="diSelect"
      styles={styles}
      maxMenuHeight={150}
      value={(option) => …

  Run Code Online (Sandbox Code Playgroud)

我试图Controller按照文档（https://react-hook-form.com/get-started#IntegratingControlledInputs）使用包装器组件将 React Select 包装在 React Hook Form 内

            <Controller
              name="ShiftCaptain"
              control={control}
              render={({ field }) => (
                <Select
                  {...field}
                  value={selectValue}
                  options={options}
                  placeholder={"Select Person"}
                  onChange={(e) => setSelectValue(e)}
                />
              )}
            />

提交表单时，React Select 中捕获的值不会填充到 React Hook Forms 中：

有任何想法吗？

TIA

我通过 React Select 有两个选择输入。我的第二个选择的 options 属性应该根据第一个反应选择中的值动态变化。做这个的最好方式是什么？

我的第一个选择：

      <Select
        styles={colourStyles}
        className="basic-single"
        classNamePrefix="select"
        isClearable={isClearable}
        isSearchable={isSearchable}
        placeholder="Select service category"
        name="color"
        options={serviceCategoriesPrimary}
        onChange={(value) =>
          value !== null ? setSelectValue(value.value) : setSelectValue("")
        }
      />

我的第二个选择：

      <Select
        styles={colourStyles}
        className="basic-single"
        classNamePrefix="select"
        isClearable={isClearable}
        isSearchable={isSearchable}
        isDisabled={selectValue === "" ? true : false}
        placeholder="Select secondary category"
        name="color"
        options={handleChooseOptions}
      />

  const handleChooseOptions = () => {
    if(selectValue === 'Health Care'){
      return options1
    }else{
      return options2
    }
  }

我可以在鼠标悬停时设置选项（React-Select）的背景颜色（如下面的代码所示）...我不明白的是如何设置背景颜色当我使用键盘上的箭头键时的一个选项。向下/向上键可以选择一个选项，但当我使用箭头键（向上/向下）将其定位在选项上时，我无法更改其背景颜色

<Select
    placeholder="Month"
    styles={{
       option: (base) => ({
           ...base,
           cursor: "pointer",
           background: "white",   // this was the mistake (I needed to remove this)
           ":hover": {
              backgroundColor: "rgb(200, 200, 200)",
            },
     }}
/>

我正在使用React Select,由于某种原因,我的状态仅在选择了两次选项后才会更改.

我有以下代码:

var React = require('react');
import Select from 'react-select';

class VehicleSelect extends React.Component {

  constructor(props) {
    super(props);

    this.state = { brandSelect: ""};

  }

  _onChange(value) {
    //console.log(value) - just to see what we recive from <Select />
    this.setState({brandSelect: value});
    console.log(this.state.brandSelect);
  }

  render() {
    var options = [
    { value: 'Volkswagen', label: 'Volkswagen' },
    { value: 'SEAT', label: 'SEAT' },
    { value: 'SKODA', label: 'SKODA' }
    ];


    return (
      <Select
          name="form-field-name"
          value={this.state.brandSelect}
          options={options}
          placeholder="Select a brand"
          searchable={false}
          onChange={this._onChange.bind(this)} …

情况：
我有一个普通的选择（类别），它决定了从 react-select 为 Select.Async 加载了哪些选项。

问题：
假设有人在 Select.Async 中搜索一个选项，而category A被选中。然后他意识到，他正在寻找的选项只能在category B. 所以他在第一次选择时切换类别。但是当他从 Select.Async 中单击搜索框时，他所做的输入消失了，他必须再次输入。

即使我在搜索输入未聚焦时更新选项集，我是否可以做些什么来保留他的输入？

<select id="categories">
    <option value="1" selected>A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<Select.Async loadOptions={load} />

完整的代码示例

下面的函数是onChange事件,用于react-select下拉列表.this.state.value(以粗体突出显示)仅在下拉列表更改时第一次未定义.有人可以提供相同的输入.但是,状态设置在以下其他条件下.

handleSelectChange(val,event) {
  var label;
if(val.map==undefined) {
  label = val["label"];
  this.setState({value:val}) ;
}
else{
  label = val["label"];
  this.setState({value:val}) ;
}
    this.setState({dropDownSelected:true},function(){
this.props.dropDownSelected(**this.state.value**);
    })
}

我正在使用react-select和formik使用自动填充文本框构建表单。

<Formik
    initialValues={{
        assignedTo: task.assignedTo,
    }}
    onSubmit={(values) => {
        const updatedTask = { ...task, ...values };
        editTask(updatedTask);
    }}
    render={({ handleSubmit, handleChange, values }) => (
        <form>
            <Select type="text" name="assignedTo" options={options} onChange={handleChange} value={{ value: task.assignedTo, label: task.assignedTo }} />
        </form>
    })
/>

引发错误 Cannot read property 'type' of undefined

如何解决此问题并在Formik中处理react-select？