如何更改按钮状态并将操作分派给 redux？

Question

我有一个监听点击事件的事件监听器并且是运行这个函数：

  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 函数就位，则不会发生更改。它基本上停留在按钮的中性状态。

有人看到我做错了什么或者对如何能够更改按钮状态和触发操作有任何建议吗？

Answer 1

我用你的代码段写了一个小程序。它按您预期的那样工作。它按预期更改了按钮中的 class。

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 等是否有任何问题，但触发了点击操作。

如何更改按钮状态并将操作分派给 redux？

How to change button state and dispatch action to redux?

reactjs

redux

react-redux

salesforce-lightning