Question

我们有一个用例，根据选择的选项数量，我们必须为多选下拉列表呈现值容器的多个不同版本。下面的代码段显示了其中一种情况。此版本的另一个版本呈现<SingleValue />而不是占位符。

<ValueContainer {...props}>
    <Placeholder {...props}>
    {!props.selectProps.inputValue && `${length} selected`}
    </Placeholder>
    {children[1]}
</ValueContainer>

这似乎运行良好，但是选择其中一个选项后，我们将失去键盘导航功能。我忘了传递某些道具或裁判吗？

可在此处找到自定义ValueContainers的键盘导航放置示例：https://codesandbox.io/s/rjvkzk1nn?from-embed

Answer 1

键盘无法正常工作，因为您错过了打开Input时聚焦的Menu组件。

ValueContainer在没有选择任何值的情况下有两个对象：

Placeholder
Input

当您选择一个（或多个）值时，其值将更改为：

SingleValue或MultiValue
Input

与以前的一样，您要删除这两个。

要保留键盘功能，您需要保留Input组件。以下代码是您的代码和期望的结合，并保留了Input组件：

const ValueContainer = ({ children, ...props }) => {
  const { getValue, hasValue } = props;
  const newChildren = _.cloneDeep(children);
  const nbValues = getValue().length;
  newChildren[0] = `${nbValues} items selected`;

  if (!hasValue) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {newChildren}
    </components.ValueContainer>
  );
};

const options = [
  { label: "label 1", value: 1 },
  { label: "label 2", value: 2 },
  { label: "label 3", value: 3 },
  { label: "label 4", value: 4 }
];

function App() {
  const components = { ValueContainer };
  return <Select isMulti components={components} options={options} />;
}

Live example。

Answer 2

事实证明，您应该将自定义值容器放在渲染器外部

const CustomValueContainer: React.FC = props => (
  <components.ValueContainer {...props} />
);

const App = () => {
  const [selectValue, setSelectValue] = useState();
  return (
    <div className="App">
      <Select
        options={options}
        value={selectValue}
        closeMenuOnSelect={false}
        onChange={value => setSelectValue(value)}
        components={{
          ValueContainer: CustomValueContainer,
        }}
      />
    </div>
  );
};

https://github.com/JedWatson/react-select/issues/2810#issuecomment-569117980

Answer 3

我的解决方案很简单，React并不抱怨缺少key道具，并且网络浏览器不会挂起。

进口

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

ValueContainer功能

  const ValueContainer = ({ children, ...props }) => {
    const length = children[0].length
    let tmpChildren = [...children];
    if(length >= 2){
      tmpChildren[0] = `${length} languages`
    }
    return (
      <components.ValueContainer {...props}>{tmpChildren}</components.ValueContainer>
    );
  };

<Select/>组件

<Select
      isMulti
      components={{ ValueContainer }}
      classNamePrefix="simplelocalize-select"
      placeholder="Showing all languages"
      closeMenuOnSelect={false}
/>

React-Select失去了对自定义组件“ ValueContainer”的关注

3 个答案: