Отмена для сохранения предыдущего состояния не работает - PullRequest
Новая
       30

Отмена для сохранения предыдущего состояния не работает

0 голосов
/ 03 мая 2019

У меня есть кнопка подтверждения и отмены со списком флажков.После нажатия кнопки «Применить» выбранное / проверенное значение должно быть сохранено в переменной состояния prevVal.При выборе какого-либо другого флажка и нажатии кнопки отмены должен быть установлен флажок для заполнения prevVal

Но при нажатии кнопки отмены currentValue становится заполненным.

Я использую временную переменную для удержаниятекущее состояние события-флажка дескриптора.

После того, как я передал значение во временную переменную, мое состояние автоматически обновляется с помощью временного значения.

Может ли кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 03 мая 2019

Я думаю, это то, что вы ищете :) Также здесь есть песочница, если вы хотите увидеть функциональность: https://stackblitz.com/edit/react-pmdgir?file=index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      prevVal: [],
      currentVal: [],
      filter: [
        {
          key: 'a'
        },
        {
          key: 'b'
        },
        {
          key: 'c'
        }
      ]
    }
  }

  toggleCurrentVal = (key) => {
    const currentVal = this.state.currentVal
    const beforeSlicedVal = []

    if(currentVal.includes(key)){
      currentVal.splice(currentVal.indexOf(key), 1)
    } else {
      currentVal.push(key)
    }
    this.setState((prevState) => {
      const prevStateValue = prevState.prevVal.length <= currentVal.length ? prevState.currentVal.filter((val) => val !== key) : prevState.prevVal
      return {
         currentVal: currentVal.sort(),
         prevVal: prevStateValue
      }
    }, () => console.log("currentValue:"+ this.state.currentVal + " preValue: " + this.state.prevVal ))
  }

  applyFilter = () => {
      console.log("currentValue:"+ this.state.currentVal + " preValue: " + this.state.prevVal )
  }

  cancel = () => {
    this.setState({
      currentVal: [],
      prevVal: this.state.currentVal
    }, () => console.log("currentValue:"+ this.state.currentVal + " preValue: " + this.state.prevVal ))
  }

  render() {
    let checkboxes = [];
    let checkedValues = this.state.currentVal
    if (this.state.filter) {
      this.state.filter.map(data => {
        checkboxes.push(
          <div><input type="checkbox" checked={checkedValues.includes(data.key)}name="a" value={data.key} onClick={() => this.toggleCurrentVal(data.key)}></input></div>
        )
      })
    }
    return (
      <div>
        {checkboxes}
        <button onClick={this.applyFilter}>Apply</button>
        <button onClick={this.cancel}>Cancel</button>
      </div>)
  }
}


render(<App />, document.getElementById('root'));
...