React-Select：为Input元素添加自定义数据属性

方法：重写Input组件 #

react-select v5.x没有直接提供给内置input添加自定义属性的props，但可以通过components属性自定义Input组件，在自定义组件里给原生input标签添加所需属性。

基础代码示例 #

import Select from 'react-select';

// 自定义Input组件，接收react-select传递的inputRef及其他props
const CustomInput = ({ inputRef, ...props }) => {
  // 直接在原生input标签上添加自定义属性，比如data-test
  return <input ref={inputRef} {...props} data-test="select-input-test" />;
};

// 使用自定义Input的Select组件
function YourComponent() {
  const options = [
    { value: 'option1', label: '选项1' },
    { value: 'option2', label: '选项2' },
  ];

  return (
    <Select
      options={options}
      // 指定自定义的Input组件
      components={{ Input: CustomInput }}
    />
  );
}

export default YourComponent;

动态传递属性值 #

如果需要动态设置自定义属性的值，可以通过组件外部的状态或变量传递：

function YourComponent() {
  const dynamicTestId = 'dynamic-select-test';
  
  const CustomInput = ({ inputRef, ...props }) => {
    return <input ref={inputRef} {...props} data-test={dynamicTestId} />;
  };

  return (
    <Select
      options={[{ value: 'a', label: 'A' }]}
      components={{ Input: CustomInput }}
    />
  );
}

关键说明 #

• 必须将react-select传递的inputRef绑定到原生input上，否则会破坏组件的原有交互逻辑（比如输入过滤、焦点控制等）。
• 除了data-test，你可以添加任意自定义属性，都会正常渲染到DOM的input元素上。

内容的提问来源于stack exchange，提问作者tverdo