React Ladda按钮:如何将属性传递到OnClick函数中

Question

使用React ladda按钮寻求帮助。LaddaButton具有属性调用"；加载"；我想把它传递到我的onClick函数中，这样我就可以在onClick功能中启用\禁用加载：

我正在使用React Ladda按钮(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?

}

Answer 1

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

请在下面找到我的代码，它会导致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();