提前感谢您查看此内容。我正在尝试将元素的页面加载类设置为待处理,然后单击 onClick,删除待处理的类并添加已完成的类:
目前,已完成和待处理的状态会相应改变;但是,课程不会改变(待定课程仍处于活动状态,而已完成则不活动)。任何帮助将不胜感激!
import React, { Component } from 'react';
import classNames from 'classnames';
import '../stylesheets/Task.css';
class Task extends Component {
constructor(props) {
super(props);
this.state = {
completed: false,
pending: true
}
this.makeComplete = this.makeComplete.bind(this);
}
makeComplete() {
if (this.state.pending) {
this.setState({
completed: true,
pending: false
}, () => {
console.log('completed: ' + this.state.completed, '\npending: ' + this.state.pending);
});
}
}
render() {
return (
<div className="task">
<div className="check-task-container" onClick={this.makeComplete} >
<i className={classNames({
completed: this.state.completed,
pending: this.state.pending,
far: true,
'fa-circle': true
})} ></i>
</div>
{this.props.title}
</div>
);
}
}