我试图将changeChecked作为prop从父组件传递到此子组件,以捕获输入元素id,但我遇到了这个错误.我已经提到了子组件和父组件.请帮我解决这个错误.
子组件
import { useState, useEffect } from 'react';
const CheckBox = ({ changeChecked, section }) => {
return (
<>
{section.options.map((option, optionIdx) => (
<div key={option.value} className="flex items-center">
<input
id={`filter-${section.id}-${optionIdx}`}
name={`${section.id}[]`}
defaultValue={option.value}
type="checkbox"
defaultChecked={option.checked}
onChange={() => changeChecked(option.id)}
className="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
/>
<label
htmlFor={`filter-${section.id}-${optionIdx}`}
className="ml-3 lg:text-sm min-w-0 flex-1 text-gray-500"
>
{option.label}
</label>
</div>
))}
</>
)
}
export default CheckBox;
父组件
import CheckBox from "../pages/collections/checkbox"
export default function App() {
const filters = [
{
id: 'brand',
name: 'Brands',
options: [
{ value: 'Casio', label: 'Casio', checked: false },
{ value: 'Yamaha', label: 'Yamaha', checked: false },
],
},
]
const onChangeChecked = (id)=>{
console.log(id)
}
return (
<div className="App">
{filters.map((section) => (
<CheckBox section={section} changeChecked={onChangeChecked} />
))}
</div>
);
}