在React / Redux

Question

主要问题

我习惯使用React和ES6类。我也习惯将部分代码模块化为单独的函数。我正在查看以下示例，并尝试弄清楚如何将onSubmit的值作为单独的函数。

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

我尝试过这样的事情：

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

function handleSubmit(e){
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''

}

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => handleSubmit(e)}>
        <input ref={node => {input = node }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

但当然它不起作用，因为它不识别输入变量。我可以将输入变量传递给函数，但这似乎不是正确的方法。

问题2：

我不熟悉以下代码所做的事情：

let AddTodo = ({ dispatch }) => {

究竟从哪里发货？是否将dispatch的值传递给匿名函数？

问题3

与以下代码相同：

<input ref={node => {input = node }}

节点的值来自何处以及为什么存储到输入变量中？