React采坑专区

React采坑专区

1. this指向问题

<button onClick={this.addList}>增加</button>

// 增加
addList() {
  console.log(this)
 //=>结果是 undefined ，而且控制台报错！！！
}

解决方法：

• 方法一：使用bind函数改变this指向

constructor(props) {
 super(props);
 this.addList = this.addList.bind(this)
}

<button onClick={this.addList}>增加</button>

// 增加
addList() {
    console.log(this)
   //=>结果是 class 对应的实例对象
}

• 方法二：使用箭头函数

<button onClick={this.addList}>增加</button>

// 增加
addList=()=> {
    console.log(this)
   //=>结果是 class 对应的实例对象
}

• 方法三：箭头函数

<button onClick={() => this.handleClick(1)}>增加</button>

// 写法1：
handleClick = (index) => {
console.log(this)
console.log(index)
this.setState({
	count: this.state.count + 1
})
}

// 写法2：
handleClick(index) {
console.log(this)
console.log(index)
this.setState({
	count: this.state.count + 1
})
}

2. 注释写法：推荐使用单行注释 {/* 内容区 */}；快捷键 ctrl + /

使用区域：

render(){
	return (
		 {/*  内容区 */}
	)
}

3. 点击label标签，自动定位光标到input输入框

<label htmlFor="pink"></label>
<input id="pink"></input>

4. React的重要特性：单项数据流

父组件向子组件传值，数据是只读的，子组件不可以改变传递的数据；

解决方法：

• 方法一：父组件将方法传递给子组件，然后子组件用传递的方法，改变父组件的数据！！！

5. 函数式编程
   • 代码清晰
   • 方便前端自动化测试
6. ref采坑

点击添加会自动加入一项

<button onClick={this.addList}>增加</button>

<ul ref={(ul) => { this.ul = ul }}>
	<li>内容</li>
</ul>

// 增加
addList() {
  console.log(this)
  this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
  })
  console.log(this.ul.querySelectorAll('li').length)
}

//=>结果：打印的结果总是比实际情况少一个；原因：this.setState是异步加载的

解决方法：将代码放在 this.setState的回调函数中

// 增加
addList() {
  console.log(this)
  this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
  },()=>{
  	console.log(this.ul.querySelectorAll('li').length)
  })
}