React todolist例子(傳參傳方法)
阿新 • • 發佈:2018-11-03
分三個元件
父元件(index.jsx)和兩個子元件(addlist.jsx,todolist.jsx)
父元件傳子元件的方法有兩個
第一種:props方式
傳值
如:<child fffss={this.state.data} /> data是父類constructor(){this.state={data:"父類數值"} }
傳方法
如:<child fangfaName={this.父類方法名.bind(this,這裡可以選擇新增多個引數)}/>
子類開始呼叫
傳值:
this.props.fffsss就能獲取值
傳方法:
this.props.fangfaName(引數) 就能呼叫對應父類的方法
第二種:ref方法
ref方式有侷限性,相同的名字只能賦值一次
傳值(同一個元件內):
<input ref="myInput" type="text"/> 呼叫:this.refs.myInput.target 。就能獲取當前物件
方法:
<child ref="diaoyong" /> 呼叫是: this.refs.diaoyong.子類的方法。這是在父類裡的寫法
index.jsx
var React=require("react"); var ReactDOM=require("react-dom"); //顯示子元件 var Todolist=require("./page/todolist.jsx"); //新增子元件 var Addlist=require("./page/addlist.jsx"); class Main extends React.Component{ constructor(props){ super(props); this.state={ arr:[], finishNum:0 } this.delArr=this.delArr.bind(this) } //constructor //新任務新增到陣列內的方法 addTask(newItem){ let arrlist=this.state.arr; arrlist.push(newItem); console.log(arrlist); this.setState({ arr:arrlist }) } //刪除(替代)任務方法 delArr(){ let data=this.state.arr; let xxxxa=[]; for (var i = 0; i < data.length; i++) { if(data[i].bol==false){ xxxxa.push(data[i]) } } console.log(xxxxa); this.setState({ arr:xxxxa }) } //獲取當前選中物件的方法 changeArr(obj){ let list=this.state.arr; list.forEach((item,index)=>{ if (item.id==obj.id) { item.bol=obj.bol; } }) this.setState({ arr:list }) } //修改當前雙擊物件屬性方法 changeObj(obj){ let list=this.state.arr; list.forEach((item,index)=>{ if (item.id==obj.id) { item.showbol=!obj.showbol; item.mess=obj.mess; } }) console.log(list); this.setState({ arr:list }) } render(){ return ( <div> <h1>任務便籤</h1> <button onClick={this.delArr}>刪除</button> <Todolist showlist={this.changeArr.bind(this)} todo={this.state.arr} updateDisplay={this.changeObj.bind(this)} /> <span>已完成了:{this.state.finishNum}</span> <span>總計:{this.state.arr.length}</span> <Addlist addMethod={this.addTask.bind(this)}/><br/> </div> ) } } ReactDOM.render(<Main/>,document.getElementById("box"))
addlist.jsx
var React=require("react"); //用於賦值給id var index=0; class Addlist extends React.Component{ constructor(props){ super(props); this.addObj=this.addObj.bind(this); } addObj(){ let mess1=this.refs.myInput.value; let id1=index++; let bol1=false; let obj={ id:id1, mess:mess1, bol:bol1, showbol:false } //呼叫父類傳過來的方法 this.props.addMethod(obj); } render(){ return ( <div> <input type="text" ref="myInput"/><br/> <button onClick={this.addObj}>新增</button> </div> ) } } module.exports=Addlist
todolist.jsx
var React=require("react");
var ReactDOM=require("react-dom");
class Todolist extends React.Component{
constructor(props){
super(props);
this.handleClick=this.handleClick.bind(this);
this.updateArr=this.updateArr.bind(this);
this.updateMess=this.updateMess.bind(this);
}
//獲得當前勾選checkbox值
handleClick(e){
let bol1=e.target.checked;
let id1=e.target.value;
let obj={
id:id1,
name:"",
bol:bol1,
}
//呼叫父類傳來的方法,對應父類的changeArr方法
this.props.showlist(obj);
}
//修改方法
updateArr(item){
/*console.log(this.refs.updateInput.value);*/
/*item.mess=this.refs.updateInput.value;*/
this.props.updateDisplay(item);
}
updateMess(e,item){
console.log(e.target.value.length);
if (e.target.value.length>0) {
item.mess=e.target.value;
}
this.props.updateDisplay(item);
}
render(){
const show={
display:'inline'
}
const hide={
display:'none'
}
var vm=this;
var ddss=this.props.todo.map(function(item,i){
return(
//key值必須唯一併且值不能被再次改變
<li key={item.id}><input type="checkbox" value={item.id} name="choose1"
onChange={(e)=>vm.handleClick(e)} style={item.showbol==false?show:hide}
/><input type="text" style={item.showbol==true?show:hide} ref="updateInput" onBlur={(e)=>{vm.updateMess(e,item)}}/>
<span onDoubleClick={()=>vm.updateArr(item)} style={item.showbol==false?show:hide}>{item.mess}</span></li>
)
})
return (
<ul>
{ddss}
</ul>
)
}
}
module.exports=Todolist;