标签：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)}标签：div let hand one ext rom spl ops list
原文地址：https://www.cnblogs.com/Lolita-web/p/9875302.html
