3.React中组件值传递的形象理解

代码如下

父组件

import React, { Component } from 'react'
import './TodoList.css'
import TodoListItem from './TodoListItem'

export class TodoList extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       inputValue:'',
       list:[]
    }
  }

  render() {
    return (
      <div>
        <input
        className = 'input'
        value = {this.state.inputValue} 
        onChange = {this.handleinputChange.bind(this)} ></input> <button onClick = {this.handleBtnClick.bind(this)}>提交</button>
        <ul>
          {this.state.list.map((item,index) =>{
            return <TodoListItem 
            content = {item} 
            index = {index}
            handleItemDelete = {this.handleItemDelete.bind(this)}></TodoListItem>
            // return <li key= {index} onClick = {this.handleBtnDeleteClick.bind(this,index)}>{item}</li>
          })}
        </ul>
      </div>
    )
  }
  handleinputChange(params) {
    this.setState({
      inputValue:params.target.value
    })
    console.log(params.target.value);
  }

  handleBtnClick(params){
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
  handleItemDelete(params){
    const list = [...this.state.list];
    list.splice(params,1);
    this.setState({
      list:list
    })
  }

  handleBtnDeleteClick(params){
    const list = [...this.state.list];
    list.splice(params,1);
    
    console.log(params);
    this.setState({
      list:list
    })
  }
};
export default TodoList

子组件代码如下

import React, { Component } from 'react'

export class TodoListItem extends Component {
    constructor(props) {
      super(props)
  
      this.handleClick = this.handleClick.bind(this);
    }
    
  render() {
    return (
      <div onClick = {this.handleClick}>
        {this.props.content}
      </div>
    )
  }
  handleClick(){
      this.props.handleItemDelete(this.props.index)
  }
}

export default TodoListItem

说明

父组件通过给子组件的属性传值，包括把内容显示的值以及index还有方法都通过属性传到子组件中，子组件在自身div中通过属性去获取值进行显示，如果是碰到方法，那么也是通过属性去调用这个方法，但是这个方法的执行却是在父组件中

WiHongNoteBook