React Core UI CMultiSelect组件重置功能失效问题求助

问题原因 #

• 重置按钮使用type="reset"会触发浏览器表单默认重置行为，和手动setState操作冲突，导致CMultiSelect的onChange被意外调用，原有值被保留。
• CMultiSelect未通过value属性做受控绑定，而是通过options的selected字段维护选中状态，这种方式无法和外部state正确同步。

解决方案 #

1. 修改按钮类型：将重置按钮的type="reset"改为type="button"，禁用浏览器默认重置行为。
2. 受控绑定CMultiSelect：给CMultiSelect添加value属性，绑定this.state.dropdownVal，移除options中的selected字段（组件会自动根据value匹配选中项）。

修改后的完整代码 #

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)
            }}
          />
        </div>
        <div className="col-sm-6">
          <CMultiSelect
            multiple={false}
            value={this.state.dropdownVal}
            options={[
              { value: '1', text: '1' },
              { value: '2', text: '2' },
              { value: '3', text: '3' },
            ]}
            onChange={(val) => {
              console.log('on change called', val)
              this.setTest(
                val.map((x) => x.value.toString())
              )
            }}
          />
        </div>
        <div className="col-sm-6">
          <CButton
            className="mt-3"
            type="button"
            onClick={() => {
              this.setTest([])
              this.setTextVal('')
            }}
          >
            Reset
          </CButton>
        </div>
      </div>
    )
  }
}

export default TestForm

关键修改说明 #

• 按钮类型改为button后，点击只会执行自定义重置逻辑，不会触发浏览器默认表单重置操作。
• CMultiSelect通过value绑定state成为完全受控组件，state变化会直接映射到组件选中状态，无需手动维护options的selected属性，彻底解决状态不同步问题。

内容的提问来源于stack exchange，提问作者Sabapathy