React - 基础知识点

1. this

import React from 'react';

class SingleSelectComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'cute' };
  }
  handleChange() {
    this.setState({ value: e.target.value });
  }
  handleSubmit(e) {
    console.log(this);
    console.log(this.state.value);
    e.preventDefault();
  }
  render() {
    return (
      <form onSubmit={(e) => { this.handleSubmit(e) }}>
        <label>
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="sunshine">sunshine</option>
            <option value="handsome">handsome</option>
            <option value="cute">cute</option>
            <option value="reserved">reserved</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    )
  }
}

export default SingleSelectComponent;

上面的例子中，onSubmit后跟的是箭头函数，this本来就指向 SingleSelectComponent 组件的实例，所以不需要修改 this，而onChange后边跟的是 this.handleChange，指代的是一个普通函数，普通函数里的this在react中为undefined，所以需要修改this指向。

修改this的方式：

• 在 constructor 中绑定 this

constructor(props) {
    super(props);
    this.state = { value: 'cute' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

• 使用箭头函数定义

handleChange = () => {
    this.setState({ value: e.target.value });
}
handleSubmit = (e) => {
    console.log(this);
    console.log(this.state.value);
    e.preventDefault();
}

• 在render中使用箭头函数

 <form onSubmit={(e) => { this.handleSubmit(e) }}></form>

2. 受控组件和非受控组件

受控组件：受state或者受props控制的组件，通过onChange实时更新state，或执行父组件的方法更新父组件的state。应用场景：1. 输入内容实时验证；2. 搜索框联想内容显示。

非受控组件：不受控制的组件。通过ref的方法获取input对应的DOM的内容，来获取value。