React組件拆分與傳值

組件拆分與組件之間的傳值

父子組件的概念：

父組件通過屬性的方式，向自組件傳值

子組件通過this.props的屬性，接收傳遞過來的值

父組件

src/TodoList.js

import React,{Component,Fragment} from 'react';
import TodoItem from './TodoItem';
import './style.css';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputVal:'',
            list:[] 
        };

        this.changeVal=this.changeVal.bind(this);
        this.addItem=this.addItem.bind(this);
        this.deleteItem=this.deleteItem.bind(this);
    }

    changeVal(e){
        this.setState({
            inputVal: e.target.value
        });
    }

    addItem(e){
        //按下回車鍵
        if(e.keyCode===13 && e.target.value!==""){
            const list=[...this.state.list,e.target.value]

            this.setState({
                //list:list
                //對象的鍵值相同時，簡寫
                list,
                inputVal:''
            })
        }
        
    }

    deleteItem(index){
        const list=[...this.state.list];
        list.splice(index,1);//從數組中刪除指定index的數據
        this.setState({
            list
        })
    }

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

    render(){
        // 這是JS中的註釋
        return (
            <Fragment>
                {/* 這是JSX中的註釋 */}
                <label htmlFor="input">請輸入內容：</label>
                <input type="text" 
                    id="input"
                    className="input"
                    value={this.state.inputVal} 
                    onChange={this.changeVal} 
                    onKeyUp={this.addItem} 
                />
                <ul>{this.getList()}</ul>
            </Fragment> 
        );
    }
}

export default TodoList;

自組件 TodoItem.js

import React,{Component} from 'react';

class TodoItem extends Component{
    constructor(props){
        super(props);
        this.deleteItem=this.deleteItem.bind(this);
    }

    deleteItem(){
        //調用父組件傳遞過來的方法
        //this.props.deleteItem(this.props.index);
        //解構賦值寫法
        const {deleteItem,index}=this.props;
        deleteItem(index);
    }

    render(){
        return <li key={this.props.index} onClick={this.deleteItem}>{this.props.item}</li>
    }
}

export default TodoItem;

效果圖