React-Ladda-Button：如何将属性传递给 OnClick 函数答案

【问题标题】：React-Ladda-Button : How to pass the properties into OnClick functionReact-Ladda-Button：如何将属性传递给 OnClick 函数
【发布时间】：2021-04-04 07:55:38
【问题描述】：

使用 React ladda 按钮寻求帮助。 LaddaButton 有一个属性调用“加载”，我想将它传递给我的 onClick 函数，以便我可以在我的 onClick 函数中启用\禁用加载：

我正在使用 React Ladda Button(https://www.npmjs.com/package/react-ladda-button?activeTab=readme)。

 import LaddaButton  from 'react-ladda-button';

   <LaddaButton
        data-style={EXPAND_LEFT}
        className='btn btn-danger btn-sm'
        onClick={(e, b) => {
          myFunction(e, rowData);
        }}
      >
        Click Me
      </LaddaButton>


//My method
  const myFunction = async (e, item) => {

      //how to call the loading propery in LaddaButton from this methond?
     
}

【问题讨论】：

标签： javascript reactjs ladda

【解决方案1】：

通常（从我看到的代码示例中）一个名为 toggle 的函数用于打开和关闭 Ladda 按钮。但是我在编写 Ladda 按钮时注意到它们在加载时对点击没有响应。我已经能够通过单击将其加载状态从未加载更改为加载，反之亦然。也许相反，您可以使用超时或在满足条件后更改状态等。这是我为 Ladda Buttons 阅读的documentation。

请在下面找到我的代码，它会导致 Ladda 按钮在单击时从未加载状态更改为加载状态。但不幸的是，它无法通过单击从加载变为不加载。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import './index.css';
import './App.css';
import LaddaButton, { EXPAND_LEFT } from 'react-ladda';

class LaButton extends Component {
  constructor(props) {
    super(props);
    this.state =  { loading: false };
    this.toggle = this.toggle.bind(this)
  }
  toggle() {
      this.setState({
        loading: true,
        progress:0.5,
      }); 
  }
 
  render() {
    return (
      <LaddaButton
      data-style={EXPAND_LEFT}
      className='btn btn-danger btn-sm'
      loading={this.state.loading}
      onClick={this.toggle}
      >
        Click Here!
      </LaddaButton>
    );
  }
 };
 
 ReactDOM.render(<LaButton />, document.getElementById("root"));

reportWebVitals();

【讨论】：