单纯的文字知识,是十分枯燥的,所以我们通过一段代码来引申出其中所涉及到的知识。
第一部分(数据 状态)
class Hello extends React.Component{
第一行没什么好说的,这个组件叫hello,注意首字母需要大写
constructor(props) {
super(props);
注意我们如何传递 props 到基础构造函数的
this.state = {
name: 0,
list : ['learn English', 'learn react'],
value: ''
};
this.handleClick = this.handleClick.bind(this);
}
this.getValue = this.getValue.bind(this);这一段很有意思,绑定事件时,我们可以通过箭头函数来正确指向this,也可以通过上述的方法来实现。
如果我们的代码为
<button onClick={"this.handleClick"}></button>
此时点击事件是无效的,在这里你是找不到this.state的。
这是因为我们定义函数的时候,this指向组件,但是当你给button绑定函数的时候,此时this指向button这个按钮,所以我们需要将this与外层this做绑定,即this.handleClick = this.handleClick.bind(this);
第二部分(函数)
handleClick() {
this.setState({
list: [...this.state.list, this.state.value],
value : ''
})
}
这是函数内容,我们不能通过this.state.list = 【“1”,“2”,“3”】
这种方式直接去改变数据,我们需要用react
给我们的setState
这一方法来实现。
第三部分(JSX)部分
render () {
return (
<div >
<div className={"todolist"}>
<p className={"title"}>这是一个工作簿</p>
<input value={this.state.value}
type="text"
onChange={this.getValue}
placeholder={"请输入计划"}/>
<button onClick={this.handleClick}>添加</button>
<ul>
{
this.state.list.map( (item, index)=> {
return
<Index
delete={this.handleDelete}
key={index} content= {item} index= {index}> </Index>
//父组件通过属性的方式传值
})
}
</ul>
</div>
</div>
)
}
}
export default Hello;
这里的重点在于将一部分组件化了(Index组件
),组件这一部分,我会在之后的博客提到