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;