在写这些代码中遇到的一些小问题(知识点):
- 由于react组件需要用一个标签将代码包裹起来,如果我们使用div这类的标签在控制台则可以看到它的盒子,那么为了避免这类问题,我们使用Fragment,这是jsx中的占位符!
- 在写绑定事件的时候,事件名称需要大写,例如
onChange={this.handleInputChange.bind(this)}
- 因为immutable,state不允许我们做任何改变,因此利用setstate更改state中的数据
- 如果出现以下错误,首先需要检查component是否首字母大写,react 对象方法里面没有component。
- react中this的指向问题:可使用bind来修改this的指向,需要注意的是bind括号内第一个参数是修改this的,后面可以设置其他参数进行传值。
- 在react中使用花括号
{}
将js表达式包裹起来 - 在react中使用循环一定要使用key值,不然会报警告
正式开发:
目标:做一个输入框,点击按钮在下面列表展示,点击对应的列表项,删除该项,如下:(没有写样式大家有需要可以自己加)
点击增加列表项目:
思路:首先将input的值设置为state的数据,然后监听input的值,之后点击按钮将列表的值替换成新的input的值。
//constructor中设置state的数据结构
constructor(props) {
super(props);
this.state = {
inputValue:'', //input中的默认值
list:[] //列表项的默认值
}
}
<Fragment>
{/*获取input的默认值,并且监听input的值*/}
<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
{/*点击按钮执行增加*/}
<button onClick={this.handleClick.bind(this)}>按钮</button>
<ul>
{
//将list中的数据循环出来
this.state.list.map((item,index)=>{
return <li key={index} onClick={this.handleClickDelet.bind(this,index)}>{item}</li>
})
}
</ul>
</Fragment>
//监听input值的变化
handleInputChange(e){
this.setState({
inputValue:e.target.value
})
}
//点击更改数据
handleClick(){
this.setState({
//。。。是es6中的展开运算符,以下意思是,将list原来的数据跟换成inputValue监听的值,并且将inputValue设置为空
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
点击删除列表项目:
//绑定handleClickDelet事件
return <li key={index} onClick={this.handleClickDelet.bind(this,index)}>{item}</li>
//handleClickDelet()
handleClickDelet(index){
//首先需要展开list
const list = [...this.state.list];
//删除点击下标的值
list.splice(index,1);
this.setState({
//更改state中的数据
list:list
})
}
完整代码:
// 若要使用fragmen首先需要在这里引入
import React,{ Component,Fragment } from 'react';
class TodoList extends Component {
//constructor中设置state的数据结构
constructor(props) {
super(props);
this.state = {
inputValue:'', //input中的默认值
list:[] //列表项的默认值
}
}
render() {
return (
//使用Fragment不会被显示
<Fragment>
{/*获取input的默认值,并且监听input的值*/}
<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
{/*点击按钮执行增加*/}
<button onClick={this.handleClick.bind(this)}>按钮</button>
<ul>
{
//将list中的数据循环出来
this.state.list.map((item,index)=>{
return <li key={index} onClick={this.handleClickDelet.bind(this,index)}>{item}</li>
})
}
</ul>
</Fragment>
)
}
//监听input值的变化
handleInputChange(e){
this.setState({
inputValue:e.target.value
})
}
//点击更改数据
handleClick(){
this.setState({
//。。。是es6中的展开运算符,以下意思是,将list原来的数据跟换成inputValue监听的值,并且将inputValue设置为空
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
//点击删除对应下标的值
handleClickDelet(index){
//首先需要展开list
const list = [...this.state.list];
//删除点击下标的值
list.splice(index,1);
this.setState({
//更改state中的数据
list:list
})
}
}
//创建了TodoList组件之后要export default出去
export default TodoList;