Question

处理输入事件时，更新了状态但ui组件未刷新。

我的版本低于

节点--version

v12.6.0

npm --version

6.11.3

“ package.json”

“反应”：“ ^ 16.9.0”，

这是我的代码

<html>
<head>
   [head content]
   <script>
        console.log('1');
   </script>
   <script>
        console.log('2');
   </script>
   <script>
        console.log('3');
   </script>
</head>
<body>
   [body content]
</body>
</html>

  constructor(props) {
    super(props);

    this.state = {
      aviableDymOptions: [],
      selectedDymOptions: [],
      displayDymOptions: [],
      controllerValues: {}
    };

    this.dymInputChangeHandler = this.dymInputChangeHandler.bind(this);
    this.dymChangeHandler = this.dymChangeHandler.bind(this);
    this.resetDymOptions = this.resetDymOptions.bind(this);

  componentDidMount() {

    let controllerValues = {};
    // default value
    this.props.dymOptions.map((item) => {

      controllerValues[item.id + RB_CB] = true;
      controllerValues[item.id + RB_DDCMP] = '';
      controllerValues[item.id + RB_IN] = '';
    });
    // update state
    this.setState({
      aviableDymOptions: this.props.dymOptions,
      controllerValues: controllerValues
    });
  }

  dymChangeHandler(e) {
    if (isEmpty(e) || isEmpty(e.value)) {

      return;
    }

    let selectedOption = e.value;
    let selectedControllType = selectedOption.controllType;
    if (isEmpty(selectedControllType)) {

      return;
    }

    let displayDymOptions = this.state.displayDymOptions.slice();
    let aviableDymOptions = this.state.aviableDymOptions.slice();
    let selectedDymOptions = this.state.selectedDymOptions.slice();

    let checkboxId = selectedOption.id + RB_CB;
    let compartorId = selectedOption.id + RB_DDCMP;
    let inputId = selectedOption.id + RB_IN;

    if (selectedControllType === global.dmyControllType.TEXT) {
      // [OK] create componenets with default value in componentDidMount
      // checkbox / dorpdown / inputtext
      displayDymOptions.push(
        <div id={selectedOption.id + 'DivGrid'} key={selectedOption.id} className="p-grid">
          <div id={selectedOption.id + 'DivLabel'} className={this.props.cnDymItemLabel}>
            <RbCheckBox id={checkboxId}
              value={this.state.controllerValues[checkboxId]}
              onChange={this.dymInputChangeHandler}
              checked={true}
            />
            <label id={selectedOption.id + 'Label'} htmlFor={checkboxId} className="p-checkbox-label">
              {selectedOption.label}
            </label>
          </div>
          <div id={selectedOption.id + 'DivOperator'} className={this.props.cnDymItemOperator}>
            <DropdownLocalDataExt
              id={compartorId}
              value={this.state.controllerValues[compartorId]}
              options={COMPARATOR_TXT}
              onChange={this.dymInputChangeHandler}
              showClear={true}
            />
          </div>
          <div id={selectedOption.id + 'DivContent'} className={this.props.cnDymItemContent}>
            <RbInputText id={inputId}
              value={this.state.controllerValues[inputId]}
              onChange={(e) => this.dymInputChangeHandler(e)} />
          </div>
        </div>
      );
    }

    // remove selected items from dropdown
    aviableDymOptions.map((item, idx) => {

      if (item.id === selectedOption.id) {

        selectedDymOptions.push(item);
        aviableDymOptions.splice(idx, 1);

        return;
      }
    });

    this.setState({
      displayDymOptions: displayDymOptions,
      aviableDymOptions: aviableDymOptions,
      selectedDymOptions: selectedDymOptions,

    });
  };

[NG]键入时，inputtext元素不会使用this.state.displayDymOptions.xxxIptx更新解决这个问题的任何想法。

谢谢。

reactjs状态已更改，但ui组件未更新

0 个答案: