分享一个很可爱的图hhh~
react具有单向数据流的特点,子组件只能使用父组件所传的值但不能修改。
父组件通过属性向子组件传值,子组件通过方法反过来去调用父组件的数据,最终相当于是父组件自己修改的数据
例:实现一个TodoList的删除item功能
父组件TodoList.js
import React,{Component, Fragment} from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component{
constructor(props){
super(props);
this.state={
list:['React','JavaScript']
}
this.removeData=this.removeData.bind(this);
}
render(){
return (
<Fragment>
<div>
<input value={this.state.inputValue}/>
<button>提交</button>
</div>
<ul>
{this.getTodoItem()}
</ul>
</Fragment>
);
}
getTodoItem(){
return (
this.state.list.map((item,index)=>{
return (
<TodoItem
content={item}
index={index}
key={index}
removeItem={this.removeData}
/>
);
}))
}
removeData(index){
this.setState((prevState)=>{
const list=[...prevState.list];
list.splice(index,1);
return {list}
});
}
}
export default TodoList;
子组件TodoItem.js
import React,{Component} from 'react';
class TodoItem extends Component{
constructor(props){
super(props);
this.handle=this.handle.bind(this);
}
render(){
const {content}=this.props;
return (<li
onClick={this.handle}
>{content}</li>);
}
handle(){
const {removeItem,index}=this.props;
removeItem(index);
}
}
export default TodoItem;
要注意this指向,此处的this.removeData是在constructor中设置后的哟~
效果如下(点击li标签便可删除)