react父子组件之间的通讯

import React, { Fragment } from "react";
import ToodItem from "./ToodItem";
import './tood.css'

class ToodList extends React.Component {

  // 组件创建一瞬间执行
  constructor(props){
    // 传递给Component的构造函数
    super(props);

    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleKeyUp = this.handleKeyUp.bind(this)
    this.handleItemClick = this.handleItemClick.bind(this)
    this.state = {
      inputValue: '',
      list: []
    }
  }

  handleInputChange(e){
    this.setState({
     inputValue : e.target.value
    })
    
  }
  handleKeyUp(e){
    if(e.target.value.trim() === ''){
      alert('输入内容不能为空')
      return
    }
    if(e.keyCode === 13){
      const list = [...this.state.list, this.state.inputValue]
      this.setState({
        list,
        inputValue: ''
      })
    }
}

getListItems(){
  // 父组件通过属性的方式传值，子组件接收index deleteFunction
  return this.state.list.map((val, index) => {
    return (<ToodItem content={val}
            key={index}
            index={index}
            deleteFunction={this.handleItemClick}
            />)
  } )
}

handleItemClick(index) {
  const list = [...this.state.list]
  // 如果仅删除一个元素，则返回一个删除后的元素的数组。 如果未删除任何元素，则返回空数组。
  // （删除元素的索引，多少项）
  list.splice(index, 1)
  this.setState({list})
}

  render() {
    return (
      // 占位符
      <Fragment>
        {/* 这是一个lable */}
        <label htmlFor='myinput'>请输入内容：</label>
        <input value={this.state.inputValue} 
        onChange={this.handleInputChange}
        onKeyUp={this.handleKeyUp}
        className='input'
        id='myinput'
        />
        <ul>
          {this.getListItems()}
        </ul>
      </Fragment>
    );
  }
}

export default ToodList;

import React from "react";

class ToodItem extends React.Component {
  constructor(props){
    super(props)
    this.handleItemClick = this.handleItemClick.bind(this)
  }

  handleItemClick(){
    // 改变父组件的list 数据
    // 子组件调用父组件传递过来的方法
    // this.props.deleteFunction(this.props.index)
    const { deleteFunction, index } = this.props;
    deleteFunction(index)
  }

  render () {
    // 子组件从父组件接受值
    const {content} = this.props
    return <li
            onClick={this.handleItemClick}
          >{content}</li>
  }
}

export default ToodItem;