5. react assembly and splitting by value component

1. The split todoList

　　Create a written 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)=>{ 
　　　　　　　　　　　　　　　　　　　　// delete incoming method bind value index and definitions in the list array (this) if the method call, then subclass does not exist
                            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

　　　　

Create a written TodoItem.js

　　#TodoItem.js

React Import, {from} the Component 'REACT'; 
class TodoItem the extends the Component { 
    constructor (The props) { 
        Super (The props); 
    } 
    the render () { 
　　　　　　// .props represented using the passed parameters 
        return ( 
          <div the onClick = {the this. delete.bind (the this)}>} {this.props.value </ div> 
        ); 
    } 
    Delete () { 
　　　　　// call to the passed component method 
        this.props.itemDelete (this.props.index); 
    } 
} 
Export default TodoItem;