我正在使用 react 和 redux 做一个 ToDo 列表,但我遇到了一个问题:当我第一次单击 ToDo 项目以将其切换为完成时,它可以成功运行,但在那之后,onClick 总是触发两次,我已经已经遇到过这样的问题,虽然我只使用 InfernoJS 来制作这个应用程序,但是通过将 toggleTodo 方法绑定到构造函数上的组件来解决它,但我现在不知道该怎么办。
组件代码
import Inferno from "inferno";
import { connect } from "inferno-redux";
import * as actions from "./../actions/actions";
import Component from "inferno-component";
import moment from "moment";
export class Todo extends Component {
render() {
moment.locale("pt-br");
var { id, text, completed, createdAt, completedAt, dispatch } = this.props;
var todoClassName = completed ? "todo todo-completed" : "todo";
var renderDate = () => {
var message = "Criado em ";
var timestamp = createdAt;
if (completed) {
message = "Completa em ";
timestamp = completedAt;
}
return message + moment(timestamp).format("DD/MM/YYYY @ HH:mm:ss");
};
return (
<div
className={todoClassName}
onClick={() => {
dispatch(actions.toggleTodo(id));
}}
>
<div>
<input type="checkbox" checked={completed} />
</div>
<div>
<p>{text}</p>
<p className="todo__subtext">{renderDate()}</p>
</div>
</div>
);
}
}
export default connect()(Todo);