React bootstrap Form.Control onClick 回调不起作用？

Question

我在这里映射数组并显示选项。

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

所以当我点击一个选项时，它应该触发句柄点击功能。 但它不起作用。 我不知道这有什么问题。

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

Answer 1

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 -->
}

Answer 2

为了使用 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
}