选项组件中缺少反应选择的默认值

Question

我正在使用反应选择库。下面我使用docs创建了一个自定义选项组件。

import React from 'react';
import Select from 'react-select';

const CustomOption = ({ innerProps, isDisabled, selectProps }) =>
  !isDisabled ? (
    <div {...innerProps}>{/* your component internals */}</div>
  ) : null;

class Component extends React.Component {
  render() {
    return <Select defaultValue={my values} components={{ Option: CustomOption }} />;
  }
}

你可以看到我设置了defaultValue，但是在CustomOption组件中执行console.log(selectProps)，没有defaultValue prop。如何让该道具出现在该组件中？

Answer 1

如果您想访问自定义

Option

组件中的选定值，则需要使用

selectProps

属性。具体来说，您可以使用

selectProps.value

来访问当前选定的值。

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

const CustomOption = ({ innerProps, isDisabled, selectProps }) => {
  const { value } = selectProps; // Access the selected value
  return !isDisabled ? (
    <div {...innerProps}>
      {/* Render the selected value */}
      {value && `Selected Value: ${value.label}`}
    </div>
  ) : null;
};

class Component extends React.Component {
  options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
  ];

  render() {
    return <Select options={this.options} defaultValue={this.options[0]} components={{ Option: CustomOption }} />;
  }
}