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

标签：get   div   tst   str   component   add   todolist   delete   nbsp   

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;

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

标签：get   div   tst   str   component   add   todolist   delete   nbsp   

原文地址：https://www.cnblogs.com/zonehoo/p/11613886.html