使用Rreact开发Todos应用附详细过程

最新推荐文章于 2023-12-30 21:57:33 发布

蜗牛有力量

最新推荐文章于 2023-12-30 21:57:33 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/wenb1bai/article/details/81149764

react 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用React开发一个Todos应用。从React的基本概念出发，逐步讲解创建组件、复用组件，以及实现添加、删除待办事项的功能。通过新建src文件夹，创建index.jsx入口文件，引入Input和List组件，再到Item组件的逻辑处理，最终完成了一个具备增删功能的Todos应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用React来开发之前首先了解一下React是什么?

React官方给出的解释是（A JavaScript library for building user interfaces）,React是一个构建∪I库的库，帮助我们更方便地构建前端页面,它可以将我们的页面组件化,方便开发和维护,可以让我们更方便地复用组件。

React 的设计初衷可能就是为了组件复用，举个简单的例子

class Header extends Component{
      constructor(props){
           super(props);        
      }
       
      render(){
           return <h1>React</h1>
      }
 }

以上代码就是一个Header组件，它不仅可以在Container里使用，在App里也可以复用。

<Container>
   <Header />
   <Main />
   <Footer />
</Container> 

<App>
   <Header />
   <Main />
</App>

现在就可以正式开发了，这次开发会做一个todos小应用，它能实现输入框输入点击enter键，添加到下面列表中，点击选项框会横线删除，再点击又会取消。

1.新建src文件夹，新建index.jsx文件作为应用的入口文件，index.html在开发时看一下就可以了，style.css为页面添加样式

<body><div id="root"></div></body>

//index.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './style.css';
class App extends Component {
	constructor() {
		super();
	}
	render() {
		return (
           <div className="app"><h1>Todos</h1></div>
	)}}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

2.增加一个 Input 组件，在 ./src/index.jsx 引用 Input 组件

// index.jsx
import React, { Component } from 'react';
import './index.css';
class Input extends Component {
    render() {
        return (
            <div className="input-container">
                <input/> </div>
   )}}
export default Input;

3.新增一个 List 组件，并且根据数组渲染出列表

import React, { Component } from 'react';
import './index.css';
const todos = ['健身', '骑车', '爬山'];
class List extends Component {
    render() {
        return (
            <div className="list">
                {todos.map((item, index) => {
                    return (
                      <div className="item" key={index}>
                          <input className="item-cb" type="checkbox" />
                          <span className="item-text">{item}</span>
                        </div>
                    ); })}
            </div>
    )}}
export default List;

4.新增 Item组件，将 List 组件列表每一项的逻辑抽离出来，在List中引用Item组件

import React, { Component } from 'react';
import './index.css';
class Item extends Component {
    render() {
        const item = this.props.item;
        return (
            <div className="item">
                <input className="item-cb" type="checkbox" />
                <span className="item-text">{item}</span>
            </div>
    )}}
export default Item;

5.Item 的 checkbox 被点击会给改事项添加删除线，再次点击去除删除线

import React, { Component } from 'react';
import './index.css';

class Item extends Component {
    constructor() {
        super();
        this.state = {
            isChecked: false };
    }
    handleClick(event) {
        this.setState({
            isChecked: !this.state.isChecked
        });}

    render() {
        const item = this.props.item;
        const isChecked = this.state.isChecked;
        const doneCls = isChecked ? ' item-done' : '';
        return (
            <div className={"item" + doneCls}>
                <input
                    onClick={this.handleClick.bind(this)}
                    className="item-cb"
                    type="checkbox"/>
                <span className="item-text">{item}</span>
            </div>
    )}}
export default Item;

//index.css 添加下面代码
.item-done .item-text {
    text-decoration: line-through;
}

6.输入换行后，将当前输入框内容添加到待办事项中，并且清除输入框

//修改 ./src/index.jsx:

class App extends Component {
    constructor() {
        super();                
        this.state = {           // 增加用于保存待办事项的数组
            arr: []
        };}
  
    onSubmit(value) {             // 增加回调
        const arr = this.state.arr;
        arr.push(value);
        this.setState({
            arr: arr
        });
    }

    render() {
        return (
            <div className="app">
                <h1>Todos</h1>
                <Input onSubmit={this.onSubmit.bind(this)} />
                <List arr={this.state.arr} />
            </div>
   )}}

给Input 组件的添加 handleKeyUp 函数

handleKeyUp(event) {
    if (event.keyCode === 13) {
        const value = event.target.value;
        if (value) {
            this.props.onSubmit(value);    // 调用回调
            event.target.value = '';
        }
    }
}

List 组件将 todos 数组改成 this.props.arr

class List extends Component {
    render() {
        const arr = this.props.arr || [];
        return (
            <div className="list">
                {arr.map((item, index) => {
                    return <Item item={item} key={index}/>
                })}
            </div>
    )}}

到这里，todos 小应用就算做好了，已经全部实现了开始所说的全部功能。