如何更改按钮状态并将操作发送到 redux？

Posted 2023-05-08

【中文标题】如何更改按钮状态并将操作发送到 redux？

【英文标题】：How to change button state and dispatch action to redux?

【发布时间】：2019-10-23 05:11:02

【问题描述】：

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

  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】：

我用你的代码段写了一个小程序。它正在按您的预期工作。它会按照您的预期更改按钮中的类。

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