react.js父子组件通信

react.js父子组件通信

这里通过todolist的功能来说明

父组件：

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

class TodoList extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      todoList: []
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChangeInput = this.handleChangeInput.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    this.parentMethod = this.parentMethod.bind(this);
    this.testChildren = this.testChildren.bind(this);
  }

  render() {
    const { inputValue,todoList } = this.state;
    return (
      <Fragment>
        <p><input value={inputValue} onChange={this.handleChangeInput} /><button onClick={this.handleSubmit}  type="button">提交</button></p>
        <TodoItem ref="children" parentMethod = {this.parentMethod} />
        <button onClick={this.testChildren}>测试调用子组件的方法</button>
        <ul>
          {
            todoList.map((item,index) => (
              <li 
                key={+new Date() + index} 
                dangerouslySetInnerHTML={{__html:item}} 
                onClick={() => this.handleDelete(index)}></li>
            ))
          }
        </ul>
      </Fragment>
    )
  };

  parentMethod() {
    alert("调动父组件方法");
  }

  testChildren() {
    this.refs.children.childrenMethod();
  }

  handleChangeInput(e) {
    this.setState({
      inputValue: e.target.value
    },() => {
      console.log(this.state);
    })
  }

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

  handleDelete(index) {
    // immutable概念
    // state不允许我们做任何的改变
    let list = [...this.state.todoList]; //拷贝一份TodoList
    list.splice(index,1);

    this.setState({
      todoList: list
    })
  }

}

export default TodoList;

子组件

import React,{ Component } from 'react';

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

  render() {
    return (
      <div>
        <h3>子组件</h3>
        <button onClick={this.childrenMethod}>子组件方法</button>
        <button onClick={this.props.parentMethod}>父组件方法</button>
      </div>
    )
  }

  childrenMethod() {
    alert("调用子组件方法");
  }

}

export default TodoItem;

总结：

父组件给子组件传递数据：直接在调用子组件的地方传递数据即可。

调用子组件的方法：简单说就是给子组件，通过ref起个名字，然后在父组件的点击事件中，通过this.refs.子组件的名字.子组件的方法来实现

 

子组件调用父组件的方法。在调用子组件的地方将方法传递，子组件中通过this.props。父组件传递的方法即可

子组件给父组件传递数据：通过调用父组件的方法时，通过callback回调传递数据。this.props.父组件的方法（传递的数据）

 

posted @ 2019-05-30 15:25 狗尾草的博客 阅读( ...) 评论( ...) 编辑 收藏