React/Redux,如何获取用户输入

IT技术 javascript reactjs redux
2021-04-27 11:08:37

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

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

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

因此它将自己的Props.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>
    )
}

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

任何帮助表示赞赏,谢谢

4个回答

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

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

如果要获取用户输入,可以执行以下操作:

此演示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.valuehandleGoClick然后方法将此值传递给动作创建者(通过 mapDispatchToProps 传递到组件的props中)。

我用ref获取input的值,handleSubmit()方法在类中,所以可以通过ref获取input。如果你想使用 dispatch 方法,只需在 mapDispatchToProps() 中映射一些props。

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

这个例子是为了让你更好地理解 react-redux 做一些典型的 react-redux 事情的方式,比如连接一个组件。这不是学习如何管理输入状态的教程。

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

他们使用所谓的不受控制的组件,即在内部处理其状态的组件。当您不必处理复杂的表单并且该特定组件的值不打算在其他地方使用时,这很方便。

但是,现在假设这个待办事项文本需要保存到服务器。此输入的值现在打算在其他地方使用,在这种情况下,可能在处理 POST 请求的操作创建者中使用。在这种情况下,表单的值包含在您的 redux 存储中,您现在正在处理Controlled Component