組件拆分與組件之間的傳值
父子組件的概念：
父組件通過屬性的方式，向自組件傳值
子組件通過this.props的屬性，接收傳遞過來的值
父組件
src/TodoList.js
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);
this.deleteItem=this.deleteItem.bind(this);
}
changeVal(e){
this.setState({
inputVal: e.target.value
});
}
addItem(e){
//按下回車鍵
if(e.keyCode===13 && e.target.value!==""){
const list=[...this.state.list,e.target.value]
this.setState({
//list:list
//物件的鍵值相同時，簡寫
list,
inputVal:''
})
}
}
deleteItem(index){
const list=[...this.state.list];
list.splice(index,1);//從陣列中洗掉指定index的資料
this.setState({
list
})
}
getList(){
return this.state.list.map((item,index)=>{
return (
<TodoItem
item={item}
key={index}
index={index}
deleteItem={this.deleteItem}
/>
)
})
}
render(){
// 這是JS中的注釋
return (
<Fragment>
{/* 這是JSX中的注釋 */}
<label htmlFor="input">請輸入內容：</label>
<input type="text"
id="input"
className="input"
value={this.state.inputVal}
onChange={this.changeVal}
onKeyUp={this.addItem}
/>
<ul>{this.getList()}</ul>
</Fragment>
);
}
}
export default TodoList;
自組件 TodoItem.js
import React,{Component} from 'react';
class TodoItem extends Component{
constructor(props){
super(props);
this.deleteItem=this.deleteItem.bind(this);
}
deleteItem(){
//呼叫父組件傳遞過來的方法
//this.props.deleteItem(this.props.index);
//解構賦值寫法
const {deleteItem,index}=this.props;
deleteItem(index);
}
render(){
return <li key={this.props.index} onClick={this.deleteItem}>{this.props.item}</li>
}
}
export default TodoItem;
效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/124754.html
標籤：JavaScript