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 (
      

        'input'
        value = {this.state.inputValue} 
        onChange = {this.handleinputChange.bind(this)} > 提交
        

          {this.state.list.map((item,index) =>{
            return 
            // return 
{item}
          })}
        
      
    )
  }
  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 (
      

        {this.props.content}
      
    )
  }
  handleClick(){
      this.props.handleItemDelete(this.props.index)
  }
}

export default TodoListItem
复制代码

说明

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

WiHongNoteBook

转载于:https://juejin.im/post/5c6bc86851882562d17d96b7