React创建一个简易的 Todo 应用（使用 props 和 state）。

vlambda
2022-04-10

React创建一个简易的 Todo 应用（使用 props 和 state）。

todolist应用

使用 props 和 state，我们可以创建一个简易的 Todo 应用。在示例中，我们使用 state 来保存现有的待办事项列表及用户的输入。尽管事件处理器看似被内联地渲染，但它们其实只会被事件委托进行收集和调用。

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
</head>

<body>
    <div id="root"></div><br><br><br><br>
    <a href="https://zh-hans.reactjs.org/">react官网的Todolist</a>
  

    
    <!-- 引入react核心库 -->
    <!-- 引入react-dom，用于支持react操作DOM -->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- 引入babel，用于将jsx转为js -->
    <!-- v6 <script ></script> -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        class TodoApp extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = { items: [], text: '' };
                    this.handleChange = this.handleChange.bind(this);
                    this.handleSubmit = this.handleSubmit.bind(this);
                }

                render() {
                    return (
                        <div>
                            <h3>TODO</h3>
                            <TodoList items={this.state.items} />
                            <form onSubmit={this.handleSubmit}>
                                <label htmlFor="new-todo">
                                    待办事项
                                </label>
                                <input
                                    id="new-todo"
                                    onChange={this.handleChange}
                                    value={this.state.text}
                                />
                                <button>
                                    添加{this.state.items.length + 1}
                                </button>
                            </form>
                        </div>
                    );
                }

                handleChange(e) {
                    this.setState({ text: e.target.value });
                }

                handleSubmit(e) {
                    e.preventDefault();
                    if (this.state.text.length === 0) {
                        return;
                    }
                    const newItem = {
                        text: this.state.text,
                        id: Date.now()
                    };
                    this.setState(state => ({
                        items: state.items.concat(newItem),
                        text: ''
                    }));
                }
            }

        class TodoList extends React.Component {
                render() {
                    return (
                        <ul>
                            {this.props.items.map(item => (
                                <li key={item.id}>{item.text}</li>
                            ))}
                        </ul>
                    );
                }
            }
      
        ReactDOM.render(<TodoApp />, document.getElementById('root'))
    </script>
</body>

</html>