所有代码
import React,{Component,Fragment} from 'react'
class TodoList extends Component{
constructor(props){
super(props);
this.state = {
list:[
'learn react',
'learn english',
'learn vue'
],
inputValue:''
}
}
handleBtnCilck(){
this.setState({
list:[...this.state.list, this.state.inputValue],
inputValue:''
})
}
handleInputChange(e){
this.setState({
inputValue:e.target.value,
})
}
handleItemClick(index){
//console.log(index);
const list = [...this.state.list];
list.splice(index,1);
this.setState({
list:list
})
}
render(){
return(
<Fragment>
<input onChange={this.handleInputChange.bind(this)}
value={this.state.inputValue}
/>
<button onClick={this.handleBtnCilck.bind(this)} className="add">添加</button>
<ul>
{
this.state.list.map((item,index)=>{
return <li className="list" key={index}>{item}
<span style={{marginLeft:"20px"}}
onClick={this.handleItemClick.bind(this,index)}
className="delete"
>删除</span>
</li>
})
}
</ul>
</Fragment>
)
}
}
export default TodoList复制代码
注意点:
【this指向问题】
1.标签事件绑定中,事件名前面的this,指向整个全局组件
<button onClick={this.handleBtnCilck.bind(this)} className="add">添加</button>复制代码
2.而在当前组件事件函数中this指向当前函数,所以如果函数中需要用到全局的state数据,就需要将函数中的this变成全局的this,this.handleBtnCilck.bind(this)
handleInputChange(e){
this.setState({
inputValue:e.target.value,
})
}复制代码
【render渲染的根标签问题】
1.render下只能渲染一个根标签,div,但是外层套一层div属于冗余代码,我们可以将其替换为<Fragment>标签,同时在上方记得引入Fragment
import React,{Component,Fragment} from 'react'复制代码
2.也可将Component,同时简化此处的代码:
class TodoList extends Component{}复制代码
【遍历渲染的key值,不能重复】
<li className="list" key={index}>{item}>复制代码
要遍历哪个标签,就return哪个标签
【遍历方法】
1.list是要遍历的数组数据
{
this.state.list.map((item,index)=>{
return <li className="list" key={index}>{item}</li>
})
}复制代码
【父子传值问题】
1.父组件通过给子组件标签上添加属性传参给子组件,子组件通过props接收父组件传递过来的参数;
父:
<CommentBox commentsLength={comments.length}/>复制代码
子:
<p>已有{this.props.commentsLength}条评论</p>复制代码
2.子给父传,是调用父组件传来的方法,将内容作为参数传出
父组件:
addComment(comment111){
this.setState({
comments:[...this.state.comments,comment111]
})
}
<CommentBox onAddComment={this.addComment}/>复制代码
子组件携带参数传给父组件:
handleSubmit(event){
this.props.onAddComment(this.textInput.value)
}复制代码
最终效果:
标签:index,代码,list,列表,React,state,添加,复制,组件 From: https://blog.51cto.com/u_12422954/5986015