Reactjs React选择自定义组件“ValueContainer”失去焦点

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

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

这似乎工作得很好，但在选择其中一个选项时，我们会丢失键盘导航。我是不是忘了传递道具或裁判

---

可在此处找到自定义ValueContainers的下拉式键盘导航示例：

键盘不再工作，因为您在打开菜单时错过了聚焦的输入组件

当没有选择值时，ValueContainer有两个对象：

占位符 输入 当您选择一个或多个值时，它会更改为：

单值还是多值 输入 在前面的示例中，您正在删除这两个

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

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} />;
}

---

.

键盘不再工作，因为您在打开菜单时错过了聚焦的输入组件

当没有选择值时，ValueContainer有两个对象：

占位符 输入 当您选择一个或多个值时，它会更改为：

单值还是多值 输入 在前面的示例中，您正在删除这两个

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

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} />;
}

---

.

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

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>
  );
};

---

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

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>
  );
};

---

我的解决方案很简单，React不会抱怨缺少关键道具，web浏览器也不会挂起

进口

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

ValueContainer函数

组成部分

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

---

我的解决方案很简单，React不会抱怨缺少关键道具，web浏览器也不会挂起

进口

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

ValueContainer函数

组成部分

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