学习记录1.10

首先在app.js中定义方法 ? ?

然后呢就在引用的组件中传递这个方法

?在组件中用this.props.方法名（参数） 进行使用

设置值的时候使用this。setState({})

作业：修改当前条目时候 ? ? ? 其他条目取消修改

setState(arg1,arg2) 括号内的arg1可传入两种参数，一种是对象，一种是函数. arg2为更改state之后的回调方法,arg2可为空.

todolist笔记：

• 1.布局
• 2.写上值
• 3.增加 在header组件
• 4.删除?
• 5.修改所选状态（ 在footer组件）
• 6.全选/取消? 在footer

绑定checked的值 onChange事件

拿到total 和doneCount

• 7.点击才出现编辑框功能 不点击不出现点击出现input 用css实现的
• 8.清除已完成任务 ？参数问题不明白？？？？？？？？
• 9.失去焦点 edit没有 ？？？？？？
• 10.编辑待办名称
• 使用了nanoid bootstrap

This.setState的使用方法大全

以下是使用 this.setState() 方法的基本使用方法：

1.在类组件中，你可以在组件的方法中调用 this.setState() 来更新状态。通常，这个方法会在事件处理函数中使用，例如在按钮点击、表单提交等事件中。

? ? this.state = {

? ? ? count: 0,

? ? };

? }

? handleClick = () => {

? ? // 使用 this.setState() 更新状态

? ? this.setState({ count: this.state.count + 1 });

? };

2.在 this.setState() 中，你传递一个新的状态对象，这个对象会与当前状态合并。React 会自动合并它们，而不会覆盖整个状态对象。

3.this.setState() 是异步的，这意味着 React 可能会将多个 this.setState() 调用合并成一个单一的更新操作，以提高性能。

因此，不应该依赖于 this.state 的即时值来计算下一个状态。

如果需要基于先前的状态计算新状态，可以使用函数形式的 this.setState()：

this.setState((prevState) =>{

? return { count: prevState.count + 1 };

});

这确保了你在更新状态时使用了最新的状态。

4.this.setState() 方法完成后，React 将调用组件的 render() 方法重新渲染组件，以反映新的状态。

5.注意，this.setState() 方法是异步的，但它可以接受一个可选的回调函数，该回调函数会在状态更新完成并且组件重新渲染后被调用。这可用于在状态更新后执行某些操作。

this.setState({ count: this.state.count + 1 }, () => {

? console.log('State updated and component re-rendered');

});

==========

问题出在第二次点击时，countdown 变成了-1或-2，这是因为在倒计时结束后，你只是将 countdown 重置为了当前的 this.state.countdown，但实际上应该将其重置为初始值。

为了解决这个问题，你需要将 countdown 在每次开始倒计时时都重置为初始值。这样，无论是第一次还是第二次点击，都会从相同的初始值开始倒计时。