typescript 核心UI React CMultiSelect重置不工作

jq6vz3qz  于 2023-01-06  发布在  TypeScript
关注(0)|答案(1)|浏览(100)

我正在尝试使用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

当我点击重置按钮时,文本字段的值重置,但多选下拉列表没有重置。

92dk7w1h

92dk7w1h1#

请尝试调用组件示例上的reset方法。您可以通过在组件状态中保存对CMultiSelect示例的引用,然后在重置处理程序中调用该示例上的reset方法来完成此操作。

class MyComponent extends React.Component {
  state = {
    select: null,
  };

  handleReset = () => {
    this.state.select.reset();
  }

  render() {
    return (
      <div>
        <CMultiSelect
          ref={(select) => this.setState({ select })}
          onChange={this.handleChange}
        />
        <button onClick={this.handleReset}>Reset</button>
      </div>
    );
  }
}

相关问题