初学react实现列表处理功能

小灰灰 2022-11-12 14:55 159阅读 0赞

> 通过上的react课程实现一个对列表相关的处理功能，涉及到的react知识点有：**建立react组件，引入react组件、react绑定事件、react循环渲染组件、react写样式、es6语法。**

1、首先熟悉下这个项目的文件夹，方便开发  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]

2、我写的文件包含下面几个  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]  
其中todolist.js文件是主文件（vue的内容文件都是以.vue为后缀；react是以.js为后缀），todoitem.js是todolist.js的一个组件，todolist.css是样式文件。

3、todolist.js文件的内容如下

写组件的时候都可以模仿着下面写

import React from 'react'
    import Todoitem from './todoitem'
    import './todolist.css'
    class Todolist extends React.Component { 
        constructor(props) { 
            super(props)
            this.state = { 
                list: [
                    'friends',
                    'lover',
                    'family',
                    'coleague',
                    'stranger',
                    'nuisance'
                ],
                inputValue: ''
            }
            this.handleBtnClick = this.handleBtnClick.bind(this)
            this.handleItemClick = this.handleItemClick.bind(this)
            this.handleInputVal = this.handleInputVal.bind(this)
        }
        handleBtnClick() { 
            this.setState({ 
                list: [...this.state.list, this.state.inputValue],
                inputValue: ''
            })
        }
        handleInputVal(e) { 
            this.setState({ 
                inputValue: e.target.value
            })
        }
        handleItemClick(index) { 
            const list = [...this.state.list]
            list.splice(index,1)
            this.setState({ 
                list: list
            })
        }
      render() { 
        return (
          <div className="todolist">
            <div>
                <input value={ this.state.inputValue} onChange={ this.handleInputVal} />
                <button onClick={ this.handleBtnClick}>add</button>
            </div>
             <ul>
                { this.state.list.map((item, index) => { 
                    return <Todoitem item={ item} key={ index} handleItemClick={ this.handleItemClick} index={ index}></Todoitem>
                }                
                )}
             </ul>
          </div>
        );
      }
    }
    export default Todolist

4、子组件todoitem.js的文件内容如下：

import React from 'react'
    class Todoitem extends React.Component { 
        constructor(props) { 
            super(props)
            this.handleItemClick = this.handleItemClick.bind(this)
        }
        handleItemClick() { 
            this.props.handleItemClick(this.props.index)
        }
        render() { 
            return (
                <div><li onClick={ this.handleItemClick}>{ this.props.item}</li></div>
            )
        }
    }
    export default Todoitem

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20221022/e3181975718948b4976baccf884a6408.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210324152802415.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3,size_16,color_FFFFFF,t_70