標籤:div let hand one ext rom spl ops list
Todolist.js(這是父組件)
import React, { Component,Fragment } from ‘react‘;import ‘./style.css‘;import TodoItem from ‘./TodoItem‘;class Todolist extends Component { constructor(props) { //最優先執行的函數 super(props); this.state={ inputValue:‘‘, list:[] } } render() { return ( <Fragment> <div> {/*這是一個todolist*/} <label htmlFor=‘insertArea‘>輸入內容</label> <input id="insertArea" className=‘input‘ value={this.state.inputValue} onChange={this.handleinputChange.bind(this)} /> <button onClick={this.handlebuttonClick.bind(this)}> 提交 </button> </div> <ul> { // 這是一個list } { this.state.list.map((item,index)=>{ return( <TodoItem //這是子組件 key={index} index={ index } item={ item } deleteItem={this.handleItemdelt.bind(this)} /> ) }) } </ul> </Fragment> ); } handleinputChange(e){ this.setState({ inputValue:e.target.value }) } handlebuttonClick(e){ this.setState({ list:[...this.state.list,this.state.inputValue], inputValue:‘‘ }) } handleItemdelt(index){ // immutable // state 不允許我們坐任何的改變 const list=[...this.state.list]; // list的一個副本 list.splice(index,1); this.setState({ list:list }) }}export default Todolist;
TodoItem.js (子組件)
import React ,{ Component } from ‘react‘;class TodoItem extends Component{ render(){ return (<li onClick={this.handleclick.bind(this)} dangerouslySetInnerHTML={{__html:this.props.item}} > </li>) } handleclick(){ this.props.deleteItem(this.props.index); }}export default TodoItem;
總結:
1. 如何建立組件的拆分?
一.首先建立一個TodoItem,然後按照react的組件寫一個組件
2.父子組件的關係
Todolist是一個大的組件,TodoItem是裡面小的組件,在react開發中,react是一個樹形的結構
3.父組件向子組件傳遞方式
通過標籤上的屬性方式向子組件傳遞,它即可以傳遞資料,又可以傳遞方法
index={ index }
deleteItem={this.handleItemdelt.bind(this)}
4.子組件怎麼接收傳遞過來的方式?
通過this.props.xxx的方式來接收,如:this.props.item
5.有的時候子組件要調用父組件的方法,去改變父組件的資料,要怎麼改變?
直接通過this.props.方法調用,然後在父組件的this指向做一次綁定bind(this)
子組件:this.props.deleteItem()
父組件:deleteItem={this.handleItemdelt.bind(this)}
react拆分組件於組件