02.React基础Demo——Todolist

这里贴出一套Todolist的完整代码。

我们实现的功能是，在输入框添加数据后，点击提交，提交的内容会更新到下面的列表中；点击列表中的一项，则会删除这条item。
用到的知识点：父子通信、fragment、state更新数据等react基础知识
面试可能会问到的问题：父子传值是怎么实现的？
回答：父传子，通过自定义属性向下传；子传父，通过自定义方法传递参数的形式传值。

//===>src/TodoList.js
import React, { Component, Fragment } from 'react'
import TodoItem from './TodoItem'

class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: '',
            list: []
        }
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.handleItemDelete = this.handleItemDelete.bind(this)
    }

    render() {
        return (
            <Fragment>
                <div>
                    <label htmlFor='insertArea'>输入内容</label>
                    <input id='insertArea' className='input'
                        value={this.state.inputValue}
                        onChange={this.handleInputChange} />
                    <button onClick={this.handleBtnClick}>提交</button>
                </div>
                <ul>
                    {this.getTodoItem()}
                </ul>
            </Fragment>
        )
    }

    handleInputChange(e) {
        const value = e.target.value
        this.setState(() => {
            return {
                inputValue: value
            }
        })
    }

    handleBtnClick() {
        this.setState((prevState) => ({
            list: [...prevState.list, prevState.inputValue],
            inputValue: ''
        }))
    }

    handleItemDelete(index) {
        this.setState((prevState) => {
            const list = [...prevState.list]
            list.splice(index, 1)
            return { list }
        })
    }

    getTodoItem() {
        return this.state.list.map((item, index) => {
            return (
                    <TodoItem
                        key={index}
                        content={item}
                        index={index}
                        deleteItem={this.handleItemDelete} />
            )
        })
    }
}

export default TodoList

//===>src/TodoItem.js
import React, { Component } from 'react'
class TodoItem extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }
    render() {
        const { content } = this.props
        return (
            <div onClick={this.handleClick}>
                {content}
            </div>
        )
    }
    handleClick() {
        const { deleteItem, index } = this.props
        deleteItem(index)
    }
}

export default TodoItem

//===>src/App.js
import React from 'react';
import TodoList from './TodoList'
function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;