React引导程序窗体.Control onClick回调不起作用

Question

这里是映射数组和显示选项。

<Form.Control as="select">
{category.specifications.map(cat => {
return <option key={cat._id} onClick={()=>handleClick(cat)}>{cat.category}</option>
})
}
</Form.Control>

所以当我点击一个选项时，它应该触发handleClick函数。但它不起作用。我不知道这里面出了什么问题。

const handleClick = (id) => {
console.log(id)
console.log('id')
}

Answer 1

为了使用cat_id我必须设置一个名为value的属性，就像这个

<Form.Control as="select" onChange={this.handleChange}>
{category.specifications.map(cat => {
return <option value={cat_id} >{cat.category}</option>
})
}
</Form.Control>

现在我可以在函数中使用该值

handleChange = (event) => {
const catId = event.target.value
}

Answer 2

React Bootstrap Form Control中没有onClick方法。你可以使用像一样的onChange方法

<Form.Control as="select" onChange={this.handleChange}>
{category.specifications.map(cat => {
return <option value={cat._id}>{cat.category}</option>
})
}
</Form.Control>

handleChange = (event) => {
let cat_id = event.target.value; <-- This will give you selected cat id -->
}