我正在处理react Leaflet,并且需要在标记弹出窗口内添加自定义组件。 在自定义组件中,我需要具有可编辑的下拉菜单。 我正在使用react select,但是单击它时下拉列表没有打开。 这是屏幕截图。
<Marker position={[28.0049, 84.124]}>
<Popup>
<CustomPopup />
</Popup>
这是CustomPopup组件 从'react'导入React,{Component,Fragment};
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class SingleSelect extends Component {
state = {
selectedOption: null,
};
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
render() {
const { selectedOption } = this.state;
return (
<div style={{ width: 300 }}>
<Select options={options} isSearchable onChange={this.handleChange} />
</div>
);
}
}
export default SingleSelect;
可编辑下拉菜单不可编辑/不可点击