组件拆分与组件之间的传值
父子组件的概念:
父组件通过属性的方式,向自组件传值
子组件通过this.props的属性,接收传递过来的值
父组件
src/TodoList.js
@H_502_17@import React,{Component,Fragment} from 'react';
import TodoItem from './TodoItem';
import './style.css';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputVal:'',list:[]
};
this.changeVal=this.changeVal.bind(this);
this.addItem=this.addItem.bind(this.deleteItem=this.deleteItem.bind();
}
changeVal(e){
.setState({
inputVal: e.target.value
});
}
addItem(e){
//按下回车键
if(e.keyCode===13 && e.target.value!==""){
const list=[....state.list,e.target.value]
.setState({
list:list
对象的键值相同时,简写
list,inputVal:''
})
}
}
deleteItem(index){
const list=[....state.list];
list.splice(index,1);从数组中删除指定index的数据
.setState({
list
})
}
getList(){
return this.state.list.map((item,index)=>{
return (
<TodoItem
item={item}
key={index}
index={index}
deleteItem={.deleteItem}
/>
)
})
}
render(){
这是JS中的注释
(
<Fragment>
{/* 这是JSX中的注释 */}
<label htmlFor="input">请输入内容:</label>
<input type="text"
id="input"
className="input"
value={.state.inputVal}
onChange={.changeVal}
onKeyUp={.addItem}
/>
<ul>{this.getList()}</ul>
</Fragment>
);
}
}
export default TodoList;
自组件 TodoItem.js
@H_502_17@import React,{Component} from 'react';
class TodoItem extends Component{
constructor(props){
super(props);
);
}
deleteItem(){
调用父组件传递过来的方法
this.props.deleteItem(this.props.index);
解构赋值写法
const {deleteItem,index}=.props;
deleteItem(index);
}
render(){
return <li key={this.props.index} onClick={this.deleteItem}>{this.props.item}</li>
}
}
export default TodoItem;
效果图