React 组件化 Todolist

1.先建立两个js文件 1.App.js 2.Text.js

    组件A （App.js）

import React,{Component,Fragment} from 'react';
import Text from './Text' //同级目录下引入 Text.js文件

class App extends Component{
  constructor(props){
    super(props)
    this.state={
      list:["衣服","食物"]
    }
  }
  add(){ //增加
    let arr = this.state.list
    arr.push(this.refs.iptValue.value)
    this.setState({
     list:arr
    })
    this.refs.iptValue.value = null;
  }
  del(index){ //删除
    let arr1 = this.state.list
    arr1.splice(index,1)
    this.setState({
      list:arr1
    })
  }
  render(){
    return(
      <Fragment>
        <div>
        <input type="text" placeholder="请输入..." ref="iptValue"/> 
        <button onClick={this.add.bind(this)}>增加</button>
        </div>
        <ul>
          {
            this.state.list.map((item,index)=>{
              return(
               <li key={index+item}>
                 <Text content={item} index = {index} delItem = {this.del.bind(this)}/>
                 {/**
                    Text为组件B(或称子组件)
                    content为传给组件B list 遍历出的内容
                    index 为 下标
                    delItem 为 让组件B来调用 删除的方法
                */}
               </li>
              )
            })
          }
        </ul>
      </Fragment>
    )
  }
}
export default App;

  组件B（Text.js）

import React, { Component,Fragment } from 'react';

class Text extends Component {
 constructor(props){
   super(props)
   this.del = this.del.bind(this)
 }
  del(){ //调用组件A的方法来进行删除，react不允许子组件直接操作父组件的数据所以只能调用方法
    this.props.delItem(this.props.index)
  }
  render() { 
    return ( 
      <Fragment>
        {/**
          使用 this.props来获取组件A传递过的值
        */}
        <span>{this.props.content}</span>
         ---
        <span onClick={this.del}>删除</span>
      </Fragment>
     );
  }
}
 
export default Text;