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

【问题标题】：React bootstrap Form.Control onClick callback is not working?React bootstrap Form.Control onClick 回调不起作用？
【发布时间】：2020-10-20 04:22:26
【问题描述】：

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

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

【问题讨论】：

是的，我也需要这个来突出显示 onClick 字段作为 onChange 的单独事件。 onClick={() => {console.log('clicked');}} 对我有用，尽管 IDE 抱怨但它仍然有效

标签： javascript reactjs react-native react-redux

【解决方案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
}

【讨论】：

【解决方案2】：

React Bootstrap 表单控件中没有 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 -->
}

【讨论】：

是的，我明白了。但我希望将 cat._id 传递给 handleChange 函数。如何做到这一点？
我已经更新了我的答案。这样，您可以拥有所选选项项的 cat_id