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.deleteItem=this.deleteItem.bind();
    }

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

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

            .setState({
                list:list
                对象的键值相同时，简写
                list,inputVal:''
            })
        }
        
    }

    deleteItem(index){
        const list=[....state.list];
        list.splice(index,1);从数组中删除指定index的数据
        .setState({
            list
        })
    }

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

    render(){
         这是JS中的注释
         (
            <Fragment>
                {/* 这是JSX中的注释 */}
                <label htmlFor="input">请输入内容：</label>
                <input type="text" 
                    id="input"
                    className="input"
                    value={.state.inputVal} 
                    onChange={.changeVal} 
                    onKeyUp={.addItem} 
                />
                <ul>{this.getList()}</ul>
            </Fragment> 
        );
    }
}

export default TodoList;

 

自组件 TodoItem.js

import React,{Component} from 'react';

class TodoItem extends Component{
    constructor(props){
        super(props);
        );
    }

    deleteItem(){
        调用父组件传递过来的方法
        this.props.deleteItem(this.props.index);
        解构赋值写法
        const {deleteItem,index}=.props;
        deleteItem(index);
    }

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

export default TodoItem;

 

效果图