我使用的是ReactJS v18.2和Reaction-SELECT v5.7.

我想向<Select/>组件的输入元素添加一个自定义属性(例如data-test),但在文档中找不到类似的内容.

对于我自己的定制功能组件,它只需将其添加到html标记,例如

<input type="text" test={XYZ}/>

对于react Select ,它根本不会显示在DOM中.我怎么才能修好它呢?

推荐答案

我面临着同样的问题,并使用了一种变通方法来使其发挥作用.为此,我必须创建自定义输入组件.

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

const CustomInput = (props) => {
  return (
    <components.Input
      {...props}
      data-test="abc" // put the value you want..
    />
  )
}

const CustomSelect = () => {
  return (
    <Select
      components={{ Input: CustomInput }}
      options={[ /* your options here */]}
    />
  )
}

export default CustomSelect

Javascript相关问答推荐

在JS中获取名字和姓氏的首字母

是否有方法在OpenWeatherMap API中获取过go 的降水数据?

了解Node.js中的EventEums和浏览器中的addEventEums之间的关系

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

将自定义排序应用于角形数字数组

如何从调整大小/zoom 的SVG路径定义新的d属性?""

如何从隐藏/显示中删除其中一个点击?

如何使onPaste事件与可拖动的HTML元素一起工作?

当使用';字母而不是与';var#39;一起使用时,访问窗口为什么返回未定义的?

用JS从平面文件构建树形 struct 的JSON

回溯替代方式

FireBase云函数-函数外部的ENV变量

如何找到带有特定文本和测试ID的div?

MongoDB中的嵌套搜索

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作,但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作

Pevent触发material 用户界面数据网格中的自动保存

如果对象中的字段等于某个值,则从数组列表中删除对象

在Press Reaction本机和EXPO av上播放单个文件

递归地将JSON对象的内容上移一级

使用JavaScript或PHP从div ID值创建锚标记和链接