Как изменить состояние кнопки и диспетчерское действие на избыточный? - PullRequest
Новая
       15

Как изменить состояние кнопки и диспетчерское действие на избыточный?

2 голосов
/ 07 июня 2019

У меня есть прослушиватель событий, прослушивающий события щелчка, и я запускаю эту функцию: 

  handleClick = e => {
    const neutralState =
      "slds-button slds-button_neutral slds-m-around_xx-small";
    const selectedState =
      "slds-button slds-button_brand slds-m-around_xx-small";
    const target = e.currentTarget;
    const targetClass = target.getAttribute("class");
    const value = target.innerHTML;

    if (targetClass === neutralState) {
      target.setAttribute("class", selectedState);
      this.saveData(value, this.props.modifier);
    } else if (targetClass === selectedState) {
      target.setAttribute("class", neutralState);
      this.removeData(value, this.props.modifier);
    }
  };

  saveData(value, modifier) {
    if (modifier === "kinds of loss") {
      this.props.dispatch(addKindsOfLoss(value));
    } else if (modifier === "type of loss") {
      this.props.dispatch(addTypeOfLoss(value));
    } else if (modifier === "water loss") {
      this.props.dispatch(addWaterLoss(value));
    }
  }

  removeData(value, modifier) {
    if (modifier === "kinds of loss") {
      this.props.dispatch(removeKindsOfLoss(value));
    } else if (modifier === "type of loss") {
      this.props.dispatch(removeTypeOfLoss(value));
    } else if (modifier === "water loss") {
      this.props.dispatch(removeWaterLoss(value));
    }
  }

Действия saveData и removeData в основном добавляют элементы или удаляют элементы из массива.

Так что в моей функции handleClick, если я закомментирую функции для this.saveData и this.removeData, кнопки меняются, как и ожидалось. Но если есть функции saveData и removeData, изменения не произойдет. Он в основном остается в нейтральном состоянии для кнопки.

Кто-нибудь видит, что я делаю неправильно, или есть какие-либо предложения о том, как можно изменить состояние кнопки и запустить действие?

1 Ответ

0 голосов
/ 07 июня 2019

Я написал небольшую программу с вашим сегментом кода.Это работает, как вы ожидали.Это меняет класс в кнопке, как вы ожидали.

const root = document.getElementById("root");

class App extends React.Component {
   constructor(props) {
       super(props);
   }

  handleClick = e => {
    const neutralState =
      "slds-button slds-button_neutral slds-m-around_xx-small";
    const selectedState =
      "slds-button slds-button_brand slds-m-around_xx-small";
    const target = e.currentTarget;
    const targetClass = target.getAttribute("class");
    const value = target.innerHTML;

    if (targetClass === neutralState) {
      target.setAttribute("class", selectedState);
      this.saveData(value, this.props.modifier);
    } else if (targetClass === selectedState) {
      target.setAttribute("class", neutralState);
      this.removeData(value, this.props.modifier);
    }
  };

  saveData(value, modifier) {
    if (modifier === "kinds of loss") {
      this.props.dispatch(addKindsOfLoss(value));
    } else if (modifier === "type of loss") {
      this.props.dispatch(addTypeOfLoss(value));
    } else if (modifier === "water loss") {
      this.props.dispatch(addWaterLoss(value));
    }
  }

  removeData(value, modifier) {
    if (modifier === "kinds of loss") {
      this.props.dispatch(removeKindsOfLoss(value));
    } else if (modifier === "type of loss") {
      this.props.dispatch(removeTypeOfLoss(value));
    } else if (modifier === "water loss") {
      this.props.dispatch(removeWaterLoss(value));
    }
  }

   render() {
       return(
           <div>
               <input type="button" value="button" class="slds-button slds-button_neutral slds-m-around_xx-small" onClick={this.handleClick} />
           </div>
       );
   }
}

ReactDOM.render(<App />, root);

Я не уверен, что есть какие-либо проблемы со специальными методами addKindsOfLoss, removeKindsOfLoss и т. Д., Но срабатывает действие при нажатии.

...