（二）React 拆分组件与组件之间的传值

主要代码：
一、TodoList.jsx

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

class TodoList extends Component {
  constructor (props) {
    super (props);
    this.state = {
      inputValue: '',
      list: [],
    };
  }
  render () {
    return (
      // Fragment   16版本提供的占位符
      (
        <Fragment>
          <label htmlFor="insertArea">输入内容</label>
          {/* 4.希望点击   <label htmlFor="insertArea">输入内容</label>  光标自动聚焦到 input 框*/}
          <input
            id="insertArea"
            className="input"
            type="text"
            value={this.state.inputValue}
            onChange={this.handleInputChange.bind (this)}
          />
          {/* 1.用组件的this去改变函数的this */}
          <button onClick={this.handleBtnClick.bind (this)}>提交</button>
          <ul>
            {this.state.list.map ((item, index) => {
              return (
                <TodoItem
                  content={item}
                  index={index}
                  key={index}
                  deleteItem={this.handleItemDelete.bind (this)}
                />
              );
            })}
          </ul>
        </Fragment>
      )
    );
  }
  handleInputChange (e) {
    console.log (e.target.value);
    // this.state.inputValue = e.target.value;
    // 2.不能直接去改变组件的值，必须调用setState() 这个方法去改变
    this.setState ({
      inputValue: e.target.value,
    });
  }
  //添加项
  handleBtnClick () {
    this.setState ({
      list: [...this.state.list, this.state.inputValue],
      inputValue: '',
    });
  }
  //   删除项
  handleItemDelete (index) {
    console.log (index);
    // immutable  state 不允许我们做任何改变
    const list = [...this.state.list];
    list.splice (index, 1);
    this.setState ({
      list: list,
    });
  }
}
export default TodoList;

二、TodoItem.jsx

import React, {Component} from 'react';

class TodoItem extends Component {
  constructor (props) {
    super (props);
    this.handleClick = this.handleClick.bind (this);
  }
  render () {
    return (
      <div onClick={this.handleClick}>
        {this.props.content}
      </div>
    );
  }
  handleClick () {
    // 子组件如何调用父组件的方法来修改父组件的内容:把父组件的方法传给子组件，在创建子组件的时候再传递一个方法
    console.log (this.props.index);
    // 子组件被点击的时候，调用父组件传过来的deleteItem()方法，同时把父组件传过来的index传给这个方法
    this.props.deleteItem (this.props.index);
  }
}

export default TodoItem;

总结：

1.父传子：通过标签上的属性的形式传给子组件（既可以传递数据，又可以传递方法）,父：<ListItem content={item} key={index}/>，子： <div>{this.props.content}</div>
2.子传（改）父：通过事件，父：一.把方法传给子组件 <ListItem content={item} index={index}
deleteItem={index => {
this.handleItemDlete.bind(this);
}}
/> ， handleItemDlete (index) {
const list = [...this.state.list];
list.splice (index, 1);
// this.state.list.splice(index,1) 不允许这样改
this.setState ({
list: list,
});
// console.log (index);
} 二.子：子组件执行父组件传过来的方法：<div onClick={this.handleClick.bind(this)}>{this.props.content}</div>， handleClick(){
this.props.deleteItem(this.props.index) //函数 deleteItem 的this指向父组件
}

需要完整代码，也可以加我微信: hello_helloxi

E:\20201017-React\farther-child