如何解决数据列表选项"A control must be associated with a text label"？

Question

创建一个下拉列表，并引用Bootstrap 5 docs'在数据列表上，它显示了一个示例:

<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>

写我的组件来处理下拉，我不确定如何解决ESLint错误:

控件必须与文本标签

相关联

代码:

import React from 'react'
import PropTypes from 'prop-types'
import { Field } from 'formik'
const Drop = ({ name, label, id, placeholder, options }) => {
return (
<div className="form-group mb-4">
<label htmlFor={name}>{label}:</label>
<Field
aria-label={`${name}-dropdown`}
name={name}
className="form-control"
list={id}
id={`${id}DropDown`}
placeholder={placeholder}
/>
<datalist id={id}>
{options.map((option, key) => (
<option key={key} value={option.toString()} data-value={option.toString()} />
))}
</datalist>
</div>
)
}
Drop.propTypes = {
name: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
options: PropTypes.array.isRequired,
}
export default Drop

• React在添加"Text"后通知eslint关联控件错误;作为控制组件
• 控件必须与文本标签
相关联
• 标签必须有相关的控制

在我的option我如何解决ESLint错误?

Answer 1

我能够通过向option添加aria-label来解决我的问题，因此:

<datalist id={id}>
{options.map((option, key) => (
<option key={key} value={option.toString()} data-value={option.toString()} />
))}
</datalist>

变成:

<datalist id={id}>
{options.map((option, key) => (
<option key={key} value={option.toString()} aria-label={option.toString()} data-value={option.toString()} />
))}
</datalist>

在遍历文档并找到control-has-associated-label之后。