[英]Can't call function inside static function ReactJs
I can't call function inside static function. 我不能在静态函数内调用函数。 Inside static function containing looping map to create a list, inside lopping I call function using a onClick
but not working. 在包含循环映射以创建列表的静态函数内部,在内部我使用a onClick
调用函数,但无法正常工作。 I don't know to parse function correctly 我不知道正确解析功能
ListData.js ListData.js
constructor(props) {
super(props);
this.state = {
forecasts: [],
loading: true
};
// This binding is necessary to make "this" work in the callback
this.getClientReport = this.getClientReport.bind(this);
this.handleDelete = this.handleDelete.bind(this);
fetch('api/SampleData/Employees')
.then(response => response.json())
.then(data => {
this.setState({ forecasts: data, loading: false });
});
}
//handle download file
getClientReport(id) {
alert('test')
}
//handle delete
handleDelete(id) {
alert('test')
}
//handle table
static renderForecastsTable(forecasts) {
return (
<table className='table table-striped'>
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Photo</th>
<th>Height</th>
<th>Weight</th>
<th></th>
</tr>
</thead>
<tbody>
{forecasts.map((forecast, index) =>
<tr key={forecast.employeeId}>
<td>{index + 1}</td>
<td>{forecast.employeeName}</td>
<td><a onClick={() => this.getClientReport(forecast.employeeId)}>Download File</a></td>
<td>{forecast.height}</td>
<td>{forecast.weight}</td>
<td>
<Link to={"/add-list/" + forecast.employeeName}>Edit</Link> |
<a onClick={() => this.handleDelete(forecast.employeeId)}>Delete</a>
</td>
</tr>
)}
</tbody>
</table>
);
}
render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: ListData.renderForecastsTable(this.state.forecasts);
return (
<div>
<h2>List Employee</h2>
{contents}
</div>
);
}
handleDelete and getClientReport not create onclick in HTML handleDelete和getClientReport无法在HTML中创建onclick
Do not make it a static
不要将其static
The
static
keyword defines a static method for a class.static
关键字为类定义静态方法。 Static methods aren't called on instances of the class . 在类的实例上不会调用静态方法 。 Instead, they're called on the class itself. 而是在类本身上调用它们。 These are often utility functions, such as functions to create or clone objects. 这些通常是实用程序功能,例如用于创建或克隆对象的功能。
( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static ) ( https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/static )
after you make the change do not forget to alter your render
to use this.renderForecastsTable(this.state.forecasts)
instead of ListData.renderForecastsTable(this.state.forecasts)
. 进行更改之后,请不要忘记更改render
以使用this.renderForecastsTable(this.state.forecasts)
而不是ListData.renderForecastsTable(this.state.forecasts)
。
A static method will not have the same this
as the calling class instance. 静态方法将不会有相同的this
是调用的类实例。 I recommend you make the method non-static, I see no reason why it should be so. 我建议您将方法设为非静态,我认为没有理由这样做。 Another alternative is to pass the required methods ( this.handleDelete
and this.getClientReport
as additional parameters. 另一种替代方法是通过所需的方法( this.handleDelete
和this.getClientReport
为附加参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.