javascript - React/Redux，如何获取用户输入

Question

我正在关注 usage with React Redux 教程。我真正不明白的是如何检索用户输入。

他们构建了一个 FilterLink 容器，其 mapDispatchToProps 是

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

因此它将自己的 Props.filter 注入(inject)连接的展示组件。如果我们去看看这个容器是如何构造的

const Footer = () => (
  <p>
    Show:{" "}
    <FilterLink filter="SHOW_ALL">All</FilterLink>{", "}
    <FilterLink filter="SHOW_ACTIVE">Active</FilterLink>{", "}
    <FilterLink filter="SHOW_COMPLETED">Completed</FilterLink>
  </p>
)

好的，有“过滤器”属性。这很清楚。

现在我想在同一个示例上构建一个文本过滤器。所以首先这是我的演示组件

const TodoSearch = ({onSubmit}) => (
    <form
        onSubmit={e => {
            e.preventDefault()
            onSubmit()
        }}
    >
        <input placeholder="Text search" />
        <input type="submit" value="Go" />
    </form>
)

但是当我来写容器的时候我不知道如何获取用户输入

const mapDispatchToProps = (dispatch) => {
    return {
        onSubmit: () => {
            dispatch(setTextSearch(????))
        }
    }
}

这是我会用 jQuery $(#text).val() 做的事情，但是...这是最好的方法吗？

稍后在同一教程中，他们构建了一个小表单以将待办事项添加到列表中。好吧，让我们去看看他们是如何捕获输入的。

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>
    )
}

等等，这里的魔法在哪里？他们是否使用该 ref 技巧将值注入(inject)“输入”变量？那是对的吗？ 因此，如果有 20 个输入字段，我是否必须使用 20 个变量和 20 个不同的引用？

感谢任何帮助，谢谢

Answer 1

将您的提交功能更改为以下内容。

const mapDispatchToProps = (dispatch) => {
    return {
        onSubmit: (evt) => {
            dispatch(setTextSearch(evt.target.querySelector('input').value)
        }
    }
}

此外，

const TodoSearch = ({onSubmit}) => (
    <form
        onSubmit={e => {
            e.preventDefault()
            onSubmit(e)
        }}
    >
        <input placeholder="Text search" />
        <input type="submit" value="Go" />
    </form>
)