我正在尝试使用Reset按钮重置Core UI ReactJS CMultiSelect组件,我已经使用setState方法重置了值,我一点击Reset按钮,状态值就发生了变化,但立即调用了CMultiSelect的onChange方法,并保留了现有值,下面是我正在尝试的代码片段。
import React from 'react'
import { CRow, CMultiSelect, CFormInput, CButton } from '@coreui/react-pro'
class TestForm extends React.Component<{}, { textVal: string; dropdownVal: string[] }> {
constructor(props: any) {
super(props)
this.state = { textVal: '123', dropdownVal: [] }
}
setTextVal(newVal: string) {
this.setState({ textVal: newVal })
}
setTest(newVal: string[]) {
this.setState({ dropdownVal: newVal })
}
render() {
return (
<div className="row m-5">
<div className="col-sm-6">
<CFormInput
type="text"
value={this.state.textVal}
onChange={(evt) => {
this.setTextVal(evt.target.value)
}}
></CFormInput>
</div>
<div className="col-sm-6">
<CMultiSelect
multiple={false}
options={[
{
value: '1',
text: '1',
selected: this.state.dropdownVal.indexOf('1') >= 0,
},
{
value: '2',
text: '2',
selected: this.state.dropdownVal.indexOf('2') >= 0,
},
{
value: '3',
text: '3',
selected: this.state.dropdownVal.indexOf('3') >= 0,
},
]}
onChange={(val) => {
console.log('on change called', val)
this.setTest(
val.map((x) => {
return x.value.toString()
}),
)
}}
></CMultiSelect>
</div>
<div className="col-sm-6">
<CButton
className="mt-3"
type="reset"
value="Reset"
onClick={() => {
this.setTest([])
this.setTextVal('')
}}
>
Reset
</CButton>
</div>
</div>
)
}
}
export default TestForm
当我点击重置按钮时,文本字段的值重置,但多选下拉列表没有重置。
1条答案
按热度按时间92dk7w1h1#
请尝试调用组件示例上的reset方法。您可以通过在组件状态中保存对CMultiSelect示例的引用,然后在重置处理程序中调用该示例上的reset方法来完成此操作。