ReactJS Semantic UI 如果用户选择相同的项目两次,下拉菜单 onChange 将不会触发
ReactJS Semantic UI dropdown onChange won't fire if the user selects the same item twice
我有一个包含 3 个选项的文件菜单:
const fileOptions = [
{ key: 'open', icon: 'open folder outline', text: 'Open lesson', value: 'open' },
{ key: 'save', icon: 'save', text: 'Save lesson', value: 'save' },
{ key: 'delete', icon: 'delete', text: 'Delete lesson', value: 'delete' },
]
一切正常,但如果我 select 例如 "Save lesson" 两次,它只会在第一次工作(我正在使用 onChange 事件)。那是因为下拉菜单的值没有改变。我应该使用什么事件?
<Button.Group color='teal'>
<Dropdown
className='button icon'
floating
options={fileOptions}
trigger={<React.Fragment />}
onChange={this.handleLessonMenu}
/>
</Button.Group>
尝试使用 onClick 事件而不是 onChange。所以它会在你每次点击选项时触发。
我通过如下更改代码来解决问题:
<Dropdown
text='File'
fluid
>
<Dropdown.Menu >
<Dropdown.Item text='Add section'
onClick={this.addSection}
/>
<Dropdown.Divider />
<Dropdown.Item text='New lesson' />
<Dropdown.Item text='Open lesson' description='ctrl + o' />
<Dropdown.Item text='Save lesson' description='ctrl + s'
onClick={this.handleSave}
/>
<Dropdown.Divider />
<Dropdown.Item text='Delete lesson' description='ctrl + d' />
</Dropdown.Menu>
</Dropdown>
我有一个包含 3 个选项的文件菜单:
const fileOptions = [
{ key: 'open', icon: 'open folder outline', text: 'Open lesson', value: 'open' },
{ key: 'save', icon: 'save', text: 'Save lesson', value: 'save' },
{ key: 'delete', icon: 'delete', text: 'Delete lesson', value: 'delete' },
]
一切正常,但如果我 select 例如 "Save lesson" 两次,它只会在第一次工作(我正在使用 onChange 事件)。那是因为下拉菜单的值没有改变。我应该使用什么事件?
<Button.Group color='teal'>
<Dropdown
className='button icon'
floating
options={fileOptions}
trigger={<React.Fragment />}
onChange={this.handleLessonMenu}
/>
</Button.Group>
尝试使用 onClick 事件而不是 onChange。所以它会在你每次点击选项时触发。
我通过如下更改代码来解决问题:
<Dropdown
text='File'
fluid
>
<Dropdown.Menu >
<Dropdown.Item text='Add section'
onClick={this.addSection}
/>
<Dropdown.Divider />
<Dropdown.Item text='New lesson' />
<Dropdown.Item text='Open lesson' description='ctrl + o' />
<Dropdown.Item text='Save lesson' description='ctrl + s'
onClick={this.handleSave}
/>
<Dropdown.Divider />
<Dropdown.Item text='Delete lesson' description='ctrl + d' />
</Dropdown.Menu>
</Dropdown>