请问react中ref回调函数里的this.xxx是什么？不太理解

Question

最近在自学react，不知道这个ref里面的this.xxx = ‘真实dom’ 这个this.xxx是什么意思？
我自己在用的时候会报错TypeError: Cannot set property this.xxx of undefined

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />  <-----请问这里的this.input 是什么，在哪声明的
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

Answer 1

首先，我这里运行你贴出来的代码是没有任何问题的，没有报错。。
这里的this是指你这个UnControlledForm。所以说这里的this你可以相当于一个对象来理解，我们可以对一个对象进行属性赋值。所以你这里的this.input可以理解成：

let obj = {
    a: 1
}
obj.b = 2

所以说这里this.input指的就是你这个input框的DOM对象。handleSubmit这个函数中使用了这个this.input这个变量。一般来说一般对于这种附加在this上的全局变量，我会现在constructor中提前声明下，比如:

......
   constructor(props) {
        super(props);
        this.input = null;
    }
......

Answer 2

this.input是你自己在constructor中定义的变量而已，可以在类中其他地方使用

Answer 3

报错是因为我自己的代码是在无状态组件中写的，是一个低级错误，初学没有考虑到这个点

const TodoList = (props) => {
    ·····
    刚开始我写在这里面，因为无状态组件，没有this
}

改成这种就好了

class TodoList extends React.Component{}