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

父子组件传值：

父组件向子组件传值通过向子组件TodoItem进行属性绑定（content={item}、index={index}）,代码如下

  getTodoItem () {
    return this.state.list.map((item, index) => {
      return (
        <TodoItem
          key={index}
          content={item}
          index={index}
          deleteItem={this.handleItemDelete}
        />
      )
    })
  }

然后子组件通过this.props.conten、this.props.index接受值，ES6写法如下：

render() {
    const { content } = this.props
    return (
        <li onClick={this.handleClick}>
          { content }
          {/* { this.props.content } */}
        </li>
    )
  }

子组件调用从父组件传来的父组件里的函数，间接修改父组件里的数据，从而实现子组件向父组件传值

由父组件向子组件进行函数的传递（ deleteItem={this.handleItemDelete} ），注意传递的函数this的指向也需要指向父组件本身，通过在父组件的constructor里进行this指向的操作），方法同传值相同,代码如下:

 getTodoItem () {
    return this.state.list.map((item, index) => {
      return (
        <TodoItem
          key={index}
          content={item}
          index={index}
          deleteItem={this.handleItemDelete}
        />
      )
    })
  }

子组件通过this.props.deleteItem接收函数进行调用，ES6写法如下：

handleClick () {
    const { deleteItem, index } = this.props
    deleteItem(index)
    // this.props.deleteItem(this.props.index)
  }

---

完整代码如下：

子组件：TodoItem

import React, { Component } from 'react'

class TodoItem extends Component {
  constructor (props) {
    super(props)
    // 将this指向放在constructor中执行，在复杂的组件开发中节约性能
    this.handleClick = this.handleClick.bind(this)
  }

  render() {
    const { content } = this.props
    return (
        <li onClick={this.handleClick}>
          { content }
          {/* { this.props.content } */}
        </li>
    )
  }

  handleClick () {
    const { deleteItem, index } = this.props
    deleteItem(index)
    // this.props.deleteItem(this.props.index)
  }
}

export default TodoItem

父组件：TodoList

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

class TodoList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      inputValue: '',
      list: []
    }
    // 将this指向放在constructor中执行，在复杂的组件开发中节约性能
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnChange = this.handleBtnChange.bind(this)
    this.handleItemDelete = this.handleItemDelete.bind(this)
  }

  render () {
    return (
      <Fragment>
        <div>
          <label
            htmlFor="insertArea"
          >
            输入内容：
          </label>
          <input
            id="insertArea"
            className='input'
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button onClick={this.handleBtnChange}>提交</button>
        </div>
        <ul>
           {/* 如果JSX里包含逻辑代码例如map可以将其抽离出来成为一个函数 */}
          { this.getTodoItem() }
        </ul>
      </Fragment>
    )
  }

  getTodoItem () {
    return this.state.list.map((item, index) => {
      return (
        <TodoItem
          key={index}
          content={item}
          index={index}
          deleteItem={this.handleItemDelete}
        />
      )
    })
  }

  handleInputChange (e) {
    // react新版本写法,异步获取inputValue数据需要const单独声明
    const value= e.target.value
    this.setState(() => {
      return {
        inputValue: value
      }
    })
    // react旧版本写法
    // this.setState({
    //   inputValue: e.target.value
    // })
  }

  handleBtnChange () {
    // prevState:修改数据之前的那一个数据是怎样的,等价于 this.props
    this.setState((prevState) => {
      return {
        list: [...prevState.list, prevState.inputValue],
        inputValue: ''
      }
    })
    // this.setState({
    //   list: [...this.state.list, this.state.inputValue],
    //   inputValue: ''
    // })
  }

  handleItemDelete (index) {
    this.setState((prevState) => {
      const list = [...prevState.list]
      list.splice(index, 1)
      return {
        list
      }
    })
    // immutable
    // state 不允许我们做任何的改变
    // const list = [...this.state.list]
    // list.splice(index, 1)
    // this.setState({
    //   list: list
    // })
  }
}

export default TodoList