React入门之--父子传值

这两天学习了React入门知识，在这里记录一下，以便日后复习

• 父组件需要通过属性的方式向子组件进行传值

• 子组件通过props来接收参数

• 子组件如果想要和父组件通信，子组件要调用父组件传递过来的方法，可以在方法中传递参数，父组件中接收参数

 

下面以一个实例来演示父子组件通信的方法：

 

父组件中的代码：TodoList.js文件

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

class TodoList extends Component {
    //组件一被创建，controller被自动执行
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            inputValue: ''
        }
    }

    handleButtonClick() {
        //该this指向的是button，所以获取不到state
        // this.state.list.push('hello word')

        // this.handleButtonClick.bind(this)
        // 指向的是该组件

        //改变state数据时，不要直接this.state，而是要用this.setState()方法
        // this.state.list.push('hello word !')

        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }

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

    handleDelete(index) {
        //复制一个副本来操作
        const list = [...this.state.list];
        list.splice(index, 1);
        //改变list时，需要用setState方式
        this.setState({
            list: list
        })
    }

    //当数据发生变化时，reander就会重新渲染
    render() {
        return (
            <div>
                <div>
                    <input value={this.state.inputValue} onChange={this.inputValueChange.bind(this)}/>
                    <button onClick={this.handleButtonClick.bind(this)}>add</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            //父组件通过属性的形式向子组件传递参数
                            return <TodoItem handleDelete={this.handleDelete.bind(this)} key={index} content={item}
                                             index={index}/>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default TodoList;

 子组件上代码: TodoItem.js

import React from 'react'

//子组件通过  props 接收父组件的值
class TodoItem extends React.Component {
    //子组件如果想要和父组件通信，子组件要调用父组件传递过来的方法
    handleDelete() {
        this.props.handleDelete(this.props.index)
    }

    render() {
        return (
            //通过this.props接收父组件传递的值
            <div onClick={this.handleDelete.bind(this)}>{this.props.content}</div>
        )
    }
}

export default TodoItem;