Question

我正在关注usage with React Redux教程。我真正没有得到的是如何检索用户输入。

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

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

因此它将其ownProps.filter注入连接的表示组件。如果我们去看看这个容器是如何构建的

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

等等，这里的魔力在哪里？他们是否通过引用技巧为“输入”变量注入了价值？那是对的吗？那么如果有20个输入字段，我是否可以使用20个变量和20个不同的参数？

感谢任何帮助，谢谢

Answer 1

如果您想获得用户输入，您可以执行以下操作：

此演示SearchForm组件呈现输入字段和按钮以触发操作。

import React, { Component, PropTypes } from 'react'

export default class SearchForm extends Component {
  constructor(props) {
    super(props)
    this.handleGoClick = this.handleGoClick.bind(this)
  }

  getInputValue() {
    return this.refs.input.value
  }

  handleGoClick() {
    this.props.onChange(this.getInputValue())
  }

  render() {
    return (
      <div>
        <input ref='input' />
        <button onClick={this.handleGoClick}>Go</button>
      </div>
    )
  }
}

请注意，输入字段的值为 ref 。您可以使用this.refs.input.value检索当前值。然后handleGoClick方法将此值传递给动作创建者（通过mapDispatchToProps传递给组件的道具）。

Answer 2

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

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

Answer 3

我使用ref来获取输入的值，handleSubmit（）方法在类中，因此它可以通过ref获取输入。如果你想使用dispatch方法，只需在mapDispatchToProps（）中映射一些道具。

class AddTodo extends Component {

    handleSubmit(event) {
        let input = this.refs.input;
        event.preventDefault();
        if (!input.value.trim()) {
            return
        }
        this.props.addTodo(input.value);
        input.value = ''
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <input ref="input"/>
                    <button type="submit">
                        Add Todo
                    </button>
                </form>
            </div>
        );
    }

}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        addTodo:(text) => {

            dispatch(addTodo(text));
        }
    }
};

export default connect(null, mapDispatchToProps)(AddTodo);

Answer 4

这个例子是为了让你更好地理解react-redux做反应的方法 - 例如连接组件。这不是学习如何管理输入状态的教程。

因此，为了示例，他们使用ref属性将input DOM节点分配给<input/>变量。然后，可以通过input.value访问此输入DOM节点的值。

他们使用所谓的Uncontrolled Component，即在内部处理其状态的组件。当您不必处理复杂的表单以及此特定组件的值不打算在别处使用时，它很方便。

但是，现在让我们说这个todo项目文本需要保存到服务器中。此输入的值现在打算在别处使用，在这种情况下，可能在处理POST请求的动作创建器中使用。在这种情况下，表单的值包含在您的redux商店中，您现在正在处理Controlled Component

React / Redux，如何获得用户输入

4 个答案: