React/Redux，如何获取用户输入 [英] React/Redux, how to get user input

问题描述

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

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

const mapDispatchToProps = (dispatch, ownProps) =>{返回 {onClick: () =>{调度(setVisibilityFilter(ownProps.filter))}}}

因此它将自己的Props.filter注入到连接的展示组件中.如果我们去看看这个容器是如何构建的

const 页脚 = () =>(<p>表演:{" "}<FilterLink filter="SHOW_ALL">All</FilterLink>{", "}<FilterLink filter="SHOW_ACTIVE">Active</FilterLink>{", "}<FilterLink filter="SHOW_COMPLETED">已完成</FilterLink></p>)

好的，有过滤器"属性.这很清楚.

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

const TodoSearch = ({onSubmit}) =>(<表格onSubmit={e =>{e.preventDefault()提交()}}><input placeholder="文本搜索"/><input type="submit" value="Go"/></表单>)

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

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

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

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

let AddTodo = ({ dispatch }) =>{让输入返回 (<div><form onSubmit={e =>{e.preventDefault()如果 (!input.value.trim()) {返回}dispatch(addTodo(input.value))输入值 = ''}}><输入参考={节点=>{输入 = 节点}}/><按钮类型=提交">添加待办事项</表单>

)}

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

感谢任何帮助，谢谢

解决方案

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

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

还有，

const TodoSearch = ({onSubmit}) =>(<表格onSubmit={e =>{e.preventDefault()提交(e)}}><input placeholder="文本搜索"/><input type="submit" value="Go"/></表单>)

i am following the usage with React Redux tutorial. Something I really don't get is how to retrieve user input.

They build a FilterLink container, whose mapDispatchToProps is

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

So it injects its ownProps.filter to the connected presentational component. If we go and see how this container is construced

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

Ok, there is the "filter" property. That's clear.

Now I want to build a text filter on the same example. So first here is my presentational component

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

But when I come to write the container I don't know how to get user input

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

It's something I would do with jQuery $(#text).val() but... is it the best way?

Later on on the same tutorial they build a little form to add a todo to the list. Ok, let's go and see how they catch input then.

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

Wait, where's the magic here? Did they inject value into "input" variabile with that ref trick? Is that correct? So if there were 20 input fields, have I to use 20 variables with 20 different refs?

Any help is appreciate, thank you

解决方案

Change your submit function to the following.

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

Also,

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

这篇关于React/Redux，如何获取用户输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！