Question

我正在编写一个简单的redux应用程序，其中一个组件看起来像这样

const LoginComponent = ({onLoginClick, onRegisterClick}) => (
    <div className={styles.loginDiv}>
        <p className={standardStyles.pageTitleText}>SyncSpace</p>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <div className={styles.loginRegisterDiv}>
            <button className={styles.loginButton} onClick={onLoginClick}>Login</button>
            <button className={styles.registerButton} onClick={onRegisterClick}>Register</button>
        </div>

    </div>
);

在点击事件上，我想读取输入用户名和密码字段的值，并将它们作为参数传递给onLoginClick事件。在Redux中读取此值的正确方法是什么？

Answer 1

Redux-Form太过分了。您肯定不需要任何类型的库来从表单中读取。

这实际上不是Redux的问题，特别是 - 这是一个React问题。在React中有两种处理表单值的方法：“受控”输入和“不受控制”输入。当您询问“如何在点击时读取值”时，答案是“使用refs从输入本身读取它们”以获取不受控制的输入，并“读取组件状态中的值”以获取受控输入。

Gosha Arinich有几篇文章解释了如何在React中使用表单的基础知识，我强烈建议您先阅读这些内容：https://goshakkk.name/on-forms-react/。他们解释了“受控”和“不受控制”的输入以及如何使用它们的想法。（Gosha也刚刚发布了一本关于表格和React的优秀书籍，我也推荐它。它比博客文章更详细：https://goshakkk.name/the-missing-forms-handbook-of-react/）。

Answer 2

我建议您查看 redux-form 。

这是一个非常活跃的项目，有一个很好的社区来回答任何问题。

以下是attach a form to the redux store的示例。

使用redux-form，您可以将表单更改为以下内容：

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const LoginComponent = ({onRegisterClick, onLoginClick}) => (
  <form onSubmit={onRegisterClick} className={styles.loginDiv}>
      <p className={standardStyles.pageTitleText}>SyncSpace</p>
      <Field name="userName" component="input" type="text" placeholder="Username"/>
      <Field name="password" component="input" type="password" placeholder="Password"/>
      <div className={styles.loginRegisterDiv}>
        <button type="submit" className={styles.loginButton}>Login</button>
      </div>
  </form>
);

我个人更喜欢在两个单独的视图中进行注册和登录操作，但如果您选择在redux-form中有两个按钮，则有多种方法可以执行此操作。 This is a good answer on attaching the action to the onClick handlers as you do, but a modification to the action so that it takes in a parameter.

redux从<input type =“text”/>读取值

2 个答案: