挑战：在React中创建一个待办事项列表
您准备好测试您对React的知识了吗？ 在这段视频中，我的课程是使用React和Redux与Modern Web Apps结合使用的 ，您将面临在React中构建基本任务清单应用程序的挑战。 具体来说，您需要将数据传递到子组件，在子组件中将对其进行更新并将其发送回父组件。
如果不确定如何执行此操作，请不要担心-您可以跳至解决方案。 我将详细介绍整个过程，向您展示它是如何完成的！
挑战：在React中创建一个待办事项列表
挑战
在这个挑战中，您将在React中创建一个基本的待办事项列表应用程序。
我们已经构建了两个组件： TodoList组件和TodoItem组件。
TodoList组件仅在其状态下有一个待办事项列表，每个组件都有一个text属性和一个done属性。 然后，我们可以在TodoItem组件中呈现待办事项列表。
然后，在TodoItem组件中，我们只渲染带有带有值的输入框的列表项。 如果此待办事项已完成，则该值不可编辑-它是只读的。 然后，我们有一个按钮，可用于“完成”或“未完成”任务。
现在，它在右侧的渲染效果很好，但实际上我们无法在TodoList组件的状态下更改这些内容。 因此，如果我尝试对这些输入元素进行更改，则什么也不会发生。 如果单击“ 完成” ，则按钮上的文本不会更改，应该保持不变。 而且我仍然可以在输入字段中选择文本，如果我可以进行更改，则可以进行编辑
所有这些都需要正确连接。 那就是您的挑战！ 这是带有所有源代码的CodePen，供您使用。
分叉笔并尝试找出自己的解决方案！ 或继续阅读，我将在下面引导您完成。
解决方案
首先，派生原始CodePen，并给它一个不同的名称，例如，添加“ MY SOLUTION”。
我们在这里需要做几件不同的事情。 首先，在TodoItem组件内部，我们需要能够对此数据进行更改。 这意味着我们需要为按钮提供一个onClick处理程序，为输入元素提供一个onChange处理程序。
但是，然后我们需要一种将这些更改传递回父TodoList组件的方法。 因此，这意味着TodoList需要将一个函数向下传递给TodoItem ，以便它可以调用该函数。
创建一个updateTodo函数
因此，我们首先在TodoList添加一个带有一些虚拟文本的updateTodo函数， TodoList我们将对其进行更新。 现在我们已经创建了updateTodo ，我们可以在TodoItem使用它。
那么这将如何工作？ 好吧，让我们从按钮开始。 我们将添加一个onClick处理程序，并添加this.handleClick 。
所以现在我们需要编写handleClick函数。 handleClick函数将对传递给TodoItem的todo属性进行TodoItem 。
单击此按钮后，我们希望反转done的值。 因此，如果为假，请将其切换为true，如果为true，则将其切换为false。 然后，当然，我们希望通过updateTodo函数将新近更新的todo对象传递回去。
我们可以通过执行Object.assign来获取newTodo ，这样我们就不会变异数据。 然后，我们将复制现有待办事项中的所有属性，实际上是this.props.todo 。
但是，接下来我们要确保我们覆盖done属性，它应该是this.props.todo.done的反方向或负值。
这就是我们的newTodo 。 然后我们可以做this.props.updateTodo ，我们将通过它我们newTodo 。
确定，因此可以处理点击。 现在，让我们继续并立即编写我们的updateTodo ，以便我们实际可以看到它的作用。 现在，如果我单击Finish ，您可以看到新的待办事项对象是在完成设置为true的地方打印出来的，但是我们尚未在UI中看到这一点。 这是因为，现在，我们需要保存这个新todo回到我们的todos的状态。
设定状态
因此，让我们继续编写一个updateTodo函数，它将把newTodo作为其参数。 在其中，我们将执行this.setState 。
现在，我将以一种您以前从未见过的方式设置状态。 我们将传递一个函数来设置状态，而不是传递一个对象。 实际上，这在React中被认为是一种很好的做法，并且可能是将来设置状态的唯一方法。 传递给setState的函数将接收当前状态作为参数。 因此，我们可以将该状态作为此函数的参数来接收，然后从该函数返回新状态。
实际上，这是创建基于旧状态的新状态的更可靠方法。 在我们的setState调用中，您几乎可以将其视为一种reducer函数。
因此，我们将继续并在此处返回一个新对象。 既然这就是我们要通过该函数执行的所有操作，则实际上我们可以将花括号括在括号中，以便它知道这是一个对象而不是功能块。
让我们获取现有的state.todos ，然后在该处映射每个todo ，如果todo.id等于newTodo.id ，那么我们知道这是我们必须替换的todo对象。 因此，我们可以将它替换为newTodo ，否则我们可以只返回旧的todo ，因为它不是我们要替换的那个。
然后我们只需要更改我们的updateTodo函数以引用this.updateTodo 。
现在，如果单击Finish ，您将看到该按钮变为Unfinish ，这是因为todo.done现在为true而不是false。 另外，“洗车场”文本现在也变灰了，并且不再可编辑。 如果单击未完成 ，它将切换回完成，并且该文本框可以再次编辑。
使文本可编辑
我们的下一步是通过添加onChange处理程序使文本可编辑。
在input行上，我们将添加onChange={this.handleChange} 。 然后我们需要编写handleChange 。
我们首先创建一个newTodo并从this.props.todo复制所有属性，然后handleChange将传递我们的事件对象。 我们将text设置为e.target.value 。 然后下面，我们将尽this.props.updateTodo ，我们将通过它的newTodo 。
所以现在，如果我们更改文本，它就可以正常工作。 现在我们可以说买鸡蛋而不是牛奶，也可以说洗车而不是洗地板。 因此，现在，我们已经成功地对子组件中的对象进行了更改，并将这些更改传递回父组件，可以在其中进行存储。
简化代码
因此，它现在可以按我们想要的方式工作，但是我还有另外一件事要做。 您会注意到， handleChange函数和handleClick函数具有许多相似的代码。 我经常有这样的子组件，我们想要以某种方式更新对象，然后将其传递回父组件，您会发现这样做的常见模式就是使用Object.assign 。
因此，我们要整理的工作是创建一个名为sendDelta的新函数。 在这种情况下，delta只是需要在此待办事项和新待办事项之间进行任何更改的术语。 因此，我们在这里可以做的就是将delta或仅需要更改属性的对象传递给sendDelta 。
然后，我们只需从handleClick复制代码并将其粘贴到sendDelta 。 delta基本上是我们传递给Object.assign的最后一个参数，因此我们可以继续将下面突出显示的代码替换为delta ，然后发送它。
因此，现在在handleClick和handleChange ，我们可以简单地用this.sendDelta替换大部分代码，如下所示。 如您所见，它更加简洁。
这就是解决方案！ 有关完整的源代码，您可以参考下面显示的解决方案CodePen ：
当然，您可能想出了不同的解决方案。 如果是这样，那太好了。 无论如何，我们现在已经成功创建了一个子组件，该子组件可以更改其数据，然后将这些更改发送回以存储到其父组件。
观看完整课程
在整个课程中，“ 使用React和Redux的Modern Web Apps” ，您将学习如何使用React和Redux来构建完整的Web应用程序。 您将从最简单的架构开始，然后逐个功能逐步构建应用程序。 到最后，您将创建一个完整的抽认卡应用程序，用于通过间隔重复进行学习，并且还将学到很多有关React和Redux的知识，以及提高您的ES6（ECMAScript 2015）技能。
您可以通过订阅Envato Elements立即学习本课程。 以低廉的月费，您不仅可以访问此课程，还可以访问我们不断发展的图书馆，其中包含1,000多个视频课程和Envato Tuts +上行业领先的电子书。
另外，您现在可以从拥有460,000多种创意资产的庞大Envato Elements库获得无限下载。 使用独特的字体，照片，图形和模板进行创建，并更快地交付更好的项目。
翻译自: https://code.tutsplus.com/tutorials/challenge-create-a-to-do-list-in-react--cms-30753