拆分组件与组件之间的传值

父组件向子组件传值通过属性的方式

• 子组件接收父组件的值采用 this.props.父组件属性名称
• 子组件向父组件专递代码实现

父组件子组件

return (
<TodoItem
    // 父组件向子组件传值、方法，子组件可以通过props调用
    itemVal={item}
    index={index}
    del={this.handleItemDelete.bind(this)}
/>

return (
    <div
        onClick={this.del}
    >
        {this.props.itemVal}
    </div>
)

子组件如何调用父组件及修改父组件的内容

• 父组件的属性名称绑定的方法，子组件去调用父组件的名称触发方法。(子组件调用父组件传递过来的方法实现子组件向父组件传值)
• 子组件可以向父组件传值，但是不可以修改父组件的值 --- 单项数据流概念
• 子组件触发父组件方法

子组件父组件

render() {
    return (
        <div
            onClick={this.del}
        >
            {this.props.itemVal}
        </div>
    )
}

del() {
    // 调用父组件删除方法
    this.props.del(this.props.index)
}

return (
    <TodoItem
        // 父组件向子组件传值、方法，子组件可以通过props调用
        itemVal={item}
        index={index}
        del={this.handleItemDelete.bind(this)}
    />
)
...
handleItemDelete(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
        list: list
    });
}

完整代码

父组件子组件

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

    // 构造方法，固定接收props
    constructor(props) {
        // 调用父类的构造函数
        super(props);
        this.state = {
            inputValue: '',
            list: []
        }
    }

    render() {
        return (
            <Fragment>
                <div>
                    <label htmlFor="insertArea">输入内容</label>
                    <input
                        id="insertArea"
                        className="input"
                        value={this.state.inputValue}
                        // 改变handleInputChange的this指向
                        onChange={this.handleInputChange.bind(this)}
                    />
                    <button onClick={this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {
                        // 渲染数据
                        this.state.list.map((item, index) => {
                            return (
                                <TodoItem
                                    // 父组件向子组件传值、方法，子组件可以通过props调用
                                    itemVal={item}
                                    index={index}
                                    del={this.handleItemDelete.bind(this)}
                                />
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }

    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        });
    }

    handleBtnClick() {
        this.setState({
            // es6 追加
            list: [...this.state.list, this.state.inputValue],
            // 提交后清空当前input
            inputValue: ''
        });
    }

    handleItemDelete(index) {
        // immutable
        // state 不允许做出任何改变
        // 展开运算符 把this.state.list做了一份copy
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState({
            list: list
        });
    }
}

export default TodoList

import React, { Component } from "react";

class TodoItem extends Component {

    constructor(props) {
        super(props)
        this.del = this.del.bind(this)
    }

    render() {
        return (
            <div
                onClick={this.del}
            >
                {this.props.itemVal}
            </div>
        )
    }

    del() {
        // 调用父组件删除方法
        this.props.del(this.props.index)
    }
}

export default TodoItem;