5. react 组件拆分 和 组件传值

Posted 2022-12-07 zonehoo

1.将 todoList 进行拆分

　　创建 编写TodoList.js

import React,  Component , Fragment  from ‘react‘;
import TodoItem from ‘./TodoItem‘;
class TodoList extends Component

    constructor( props )
        super(props);
        this.state = 　inputValue: ‘‘, list: [] 
    
    render()
        return (
            <Fragment>
                <input type=‘text‘ value=this.state.inputValue  onChange=this.inputChange.bind(this) />
                <button onClick=this.addClick.bind(this)>提交</button>
                <ul>
                    
                        this.state.list.map((value, index)=>
　　　　　　　　　　　　　　　　　　　　// 传入 list 数组内的 value index 和 定义的删除方法 bind(this) 如果子类调用的话 该方法是不存在的
                            return (
                                <TodoItem value=value index=index itemDelete=this.itemDelete.bind(this)/>
                            );
                        )
                    
                </ul>
            </Fragment>
        );
    
    inputChange(e)
        this.setState( inputValue: e.target.value );
    
    addClick()
        this.setState(
            list : [...this.state.list, this.state.inputValue],
            inputValue: ‘‘
        )
    
    itemDelete(index)
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState(list:list);
    

export default TodoList

　　　　

创建 编写TodoItem.js

　　#TodoItem.js

import React ,  Component  from ‘react‘;
class TodoItem extends Component
    constructor(props)
        super(props);
    
    render() 
　　　　　　// 使用 .props 表示 传递过来的参数
        return (
          <div onClick=this.delete.bind(this)>this.props.value</div>
        );
    
    delete()
　　　　　// 调用 组件传递过来的方法
        this.props.itemDelete(this.props.index);
    

export default TodoItem;