3、React 待办事项应用开发全流程解析

React 待办事项应用开发全流程解析

1. 显示待办事项

在开发待办事项应用时，下一步是将每个待办事项展示给用户，让他们能看到任务细节，并在完成任务时标记为已完成。以下是 src 文件夹中 App.js 文件的代码示例：

import React, { Component } from 'react';
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userName: "Adam",
            todoItems: [{ action: "Buy Flowers", done: false },
                        { action: "Get Shoes", done: false },
                        { action: "Collect Tickets", done: true },
                        { action: "Call Joe", done: false }],
            newItemText: ""
        }
    }
    updateNewTextValue = (event) => {
        this.setState({ newItemText: event.target.value });