- 1.子組件的屬性接收一個父組件的方法
- 2.在子組件中,調用這個方法,向父組件傳參
~~~
//1.子組件
import React,{Component} from 'react';
class TodoItem extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this)
}
render(){
return (
<div onClick={this.handleClick}>
{this.props.content}
{this.props.index}
</div>
)
}
handleClick(){
this.props.deleteItem(this.props.index)
}
}
export default TodoItem
~~~
~~~
//2.父組件import React, { Component} from 'react';
import './index.css';
import TodoItem from './components/TodoItem';
class App extends Component {
constructor(props) {
super(props);
this.state ={
list:[1,2,3]
}
}
render() {
return (
<div>
{this.state.list.map((item,index)=>{
return <TodoItem key={index} content={item} index={index}
//向子組件傳遞一個事件
deleteItem={this.handleDelete.bind(this)}
></TodoItem>
})}
</div>
)
}
handleDelete(index){
var list = this.state.list;
list.splice(index,1);
this.setState({
list:list
})
}
}
export default App;
~~~
- react
- 第一章 React入門
- 1-1 開發環境搭建
- 1-2 循環
- 1-3 jsx語法
- 1-4 react特點
- 第二章 基本語法
- 2-1 組件
- 2-2 實現一個簡單的TodoList
- 2-2-1刪除
- 2-3 組件之間的傳值
- 2-4 子組件向父組件傳值
- 2-5 react-router實現一個簡單路由
- 2-6 ref的使用
- 2-7 setState方法
- 2-8 生命周期函數
- 2-9 react的css過渡動畫
- 2-10 react中的內聯樣式
- 2-11 事件
- 2-12 箭頭函數
- 第三章 redux
- 第一節 使用
- 1.1 action
- 1.2 實現todoList的增刪功能
- 1.3 actionTypes的拆分
- 1.4 actionCreators.js統一管理action
- 1-5 redux設計的三大原則
- 第二節 安裝Redux
- 第三節 redux進階
- 3.1 ui組件和容器組件的拆分
- 3.2無狀態組件
- 3.3 Redux-thunk中間件ajax請求數據
- 3.4redux中間件
- 3.5 redux-saga中間件
- 第四節 react-redux
- 第四章 項目啟動
- 第一節 styled-components
- 1-1 style 引入背景圖片
- 1-2 樣式組件
- ant-design
- 1.起步