react-redux 中的 ref 和 node 指的是什么？

Question

我正在从 docs 学习 react-redux，但不明白下面的意思。 ref 部分指的是什么？和节点？从我看到的任何地方都没有使用这个参考。 ref 是否在渲染后引用 DOM 上的子组件节点（输入）？如果是这样，为什么不直接引用输入？

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

Answer 1

这是一个ref callback attribute，其目的是获得"direct access"到DOMelement/class的分量。使用 ref 您可以 focus 一个输入框，直接获取它的值或访问 class 组件的方法。

在这种情况下，它的目的是通过为输入变量（let input）分配一个引用来 get/change 输入的值 - 请参阅代码中的注释。

let AddTodo = ({ dispatch }) => {
  let input // the input variable which will hold reference to the input element

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) { // using the input variable
          return
        }
        dispatch(addTodo(input.value)) // using the input variable
        input.value = ''
      }}>
        <input ref={node => {
          input = node // assign the node reference to the input variable
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}

react-redux 中的 ref 和 node 指的是什么？

What does ref and node refer to in react-redux?

ref

ecmascript-6

reactjs

redux

react-redux